feat: introduce markdown attributes syntax {}

docs/content/2.writing/2.syntax.md

@@ -310,9 +310,24 @@ Inline components are used to put components in the middle of any Markdown block
 ::
 
 
-## Text Attributes
+## Span Text
 
-Text attributes are useful for highlighting and modifying part of paragraph. The syntax is nearly similar to inline components and markdown links syntax.
+To create inline spans in your text you can use `[TEXT]` syntax.
+
+::code-group
+
+  ```md [Code]
+  Hello [World]!
+  ```
+
+  ::code-block{label="Preview" preview}
+  Hello [World]!
+  ::
+::
+
+## Attributes
+
+Attributes are useful for highlighting and modifying part of paragraph. The syntax is nearly similar to inline components and markdown links syntax.
 
 ::code-group
 
@@ -324,3 +339,21 @@ Text attributes are useful for highlighting and modifying part of paragraph. The
   Hello [World]{.text-primary-500}!
   ::
 ::
+
+Other that spans the attribute syntax will work on images, links, `code`, **bold** and _italic_ texts.
+
+
+::code-group
+
+  ```md [Code]
+  Attributes works on ![](/icon.png){.inline.w-5.h-5.bg-primary-500} image, 
+  [link](#attributes){.bg-primary-400}, `code`{style="color: tomato"}, 
+  _italic_{.bg-primary-500} and **bold**{.bg-primary-500} texts.
+  ```
+
+  ::code-block{label="Preview" preview}
+  Attributes works on ![](/icon.png){.inline.w-5.h-5.bg-primary-500} image, 
+  [link](#attributes){.bg-primary-400}, `code`{style="color: tomato"}, 
+  _italic_{.bg-primary-500} and **bold**{.bg-primary-500} texts.
+  ::
+::

docs/content/2.writing/4.prose.md

@@ -10,7 +10,6 @@ We are using a per-tag component system that allows you to customize your Markdo
 
 Here is a list of all the Prose components currently implemented.
 
-
 ### `ProseA`
 
 [:icon-git-hub{class="inline -mt-1 w-6"} Source](https://github.com/nuxtlabs/docus/tree/main/src/defaultTheme/components/atoms/prose/ProseA.vue)
@@ -263,6 +262,21 @@ Here is a list of all the Prose components currently implemented.
   ::
 ::
 
+### `ProseEm`
+
+[:icon-git-hub{class="inline -mt-1 w-6"} Source](https://github.com/nuxtlabs/docus/tree/main/src/defaultTheme/components/atoms/prose/ProseEm.vue)
+
+::code-group
+
+  ```markdown [Code]
+  _Just an italic paragraph._
+  ```
+
+  ::code-block{label="Preview"}
+  _Just an italic paragraph._
+  ::
+::
+
 ### `ProseTable`
 
 [:icon-git-hub{class="inline -mt-1 w-6"} Source](https://github.com/nuxtlabs/docus/tree/main/src/defaultTheme/components/atoms/prose/ProseTable.vue)

docs/content/3.features/3.assets.md

@@ -27,14 +27,14 @@ In order to display an image for a specific color mode, you can use two classes:
 
 ::code-group
   ::code-block{label="Preview" active preview}
-    :img{src="/logo-light.svg" class="light-img" alt="Logo light" style="margin:0;" width="219" height="40"}
-    :img{src="/logo-dark.svg" class="dark-img" alt="Logo dark" style="margin:0;" width="219" height="40"}
+    ![Logo light](/logo-light.svg){.light-img .m-0 width="219" height="40"}
+    ![Logo dark](/logo-dark.svg){.dark-img .m-0 width="219" height="40"}
   <p class="flex items-center" style="margin-bottom:0;">Switch between light and dark mode:&nbsp;<color-switcher class="inline-flex ml-2"></color-switcher></p>
   ::
 
   ```md [Code]
-  :img{src="/logo-light.svg" class="light-img" alt="Logo light"}
-  :img{src="/logo-dark.svg" class="dark-img" alt="Logo dark"}
+    ![Logo light](/logo-light.svg){.light-img .m-0 width="219" height="40"}
+    ![Logo dark](/logo-dark.svg){.dark-img .m-0 width="219" height="40"}
   ```
 ::
 
@@ -55,7 +55,7 @@ In order to allow `@nuxt/image` to optimize _remote_ images you will need to add
   ```
 
   ```md [Code]
-  <nuxt-picture src="https://image.nuxtjs.org/social.png" width="1280" height="640" />
+  :nuxt-picture{src="https://image.nuxtjs.org/social.png" width="1280" height="640"}
   ```
 
   ::code-block{label="Preview" preview}

docs/content/5.templates/blog/creating-blog-with-nuxt-content.md

@@ -172,7 +172,7 @@ To display our content we are using the `<nuxt-content />` component by passing
 
 We can now run our dev server and go to the route [http://localhost:3000/blog/my-first-blog-post](http://localhost:3000/blog/my-first-blog-post) and we should see our content from our markdown file.
 
-<nuxt-img alt="content from markdown" src="/blog/creating-blog-with-nuxt-content/get-started-with-nuxt-content.png"></nuxt-img>
+![content from markdown](/blog/creating-blog-with-nuxt-content/get-started-with-nuxt-content.png)
 
 ### Default Injected variables
 

nuxtjs.org/content/0.docs/2.concepts/1.views.md

@@ -5,7 +5,7 @@ category: concepts
 csb_link: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/02_concepts/01_views?fontsize=14&hidenavigation=1&theme=dark
 ---
 
-:img{src="/img/docs/views.png"}
+![](/img/docs/views.png)
 
 Composition of a View in Nuxt.js
 

nuxtjs.org/content/0.docs/2.concepts/2.context-helpers.md

@@ -6,7 +6,7 @@ csb_link_context: https://codesandbox.io/embed/github/nuxt-academy/guides-exampl
 csb_link_helpers: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/02_concepts/02_context_helpers-helpers?fontsize=14&hidenavigation=1&theme=dark
 ---
 
-:img{src="/img/docs/context.svg"}
+![](/img/docs/context.svg)
 
 The `context` object is available in specific Nuxt functions like [asyncData](/docs/features/data-fetching#async-data), [plugins](/docs/directory-structure/plugins), [middleware](/docs/directory-structure/middleware) and [nuxtServerInit](/docs/directory-structure/store#the-nuxtserverinit-action). It provides _additional_ and often optional information about the current request to the application.
 

nuxtjs.org/content/0.docs/2.concepts/5.nuxt-lifecycle.md

@@ -6,7 +6,7 @@ img: /docs/nuxt-lifecycle.svg
 imgAlt: understanding-nuxt-2-12-lifecycle-hooks
 ---
 
-:img{src="/img/docs/nuxt-lifecycle.svg"}
+![](/img/docs/nuxt-lifecycle.svg)
 
 The goal of this chapter is to give you a high-level overview of the different parts of the framework, their order of execution and how they work together.
 

nuxtjs.org/content/0.docs/4.directory-structure/10.plugins.md

@@ -9,7 +9,7 @@ csb_link_plugins_custom: https://codesandbox.io/embed/github/nuxt-academy/guides
 csb_link_plugins_vue: https://codesandbox.io/embed/github/nuxt-academy/guides-examples/tree/master/04_directory_structure/12_plugins_vue?fontsize=14&hidenavigation=1&theme=dark
 ---
 
-:img{src="/img/docs/plugins.svg"}
+![](/img/docs/plugins.svg)
 
 This is the place to add Vue plugins and to inject functions or constants. Every time you need to use `Vue.use()`, you should create a file in `plugins/` and add its path to `plugins` in `nuxt.config.js`.
 

nuxtjs.org/content/0.docs/4.directory-structure/4.content.md

@@ -5,7 +5,7 @@ description: Empower your Nuxt.js application with `@nuxt/content` module wher
 category: directory-structure
 ---
 
-:img{src="/img/docs/nuxt-content.svg"}
+![](/img/docs/nuxt-content.svg)
 
 ### Hot reload in development
 

nuxtjs.org/content/0.docs/4.directory-structure/8.modules.md

@@ -17,7 +17,7 @@ Discover our [list of modules](https://modules.nuxtjs.org) to supercharge your N
 Check out [modules.nuxtjs.org](https://modules.nuxtjs.org)
 ::
 
-:img{src="/img/docs/modules.svg"}
+![](/img/docs/modules.svg)
 
 While developing production-grade applications with Nuxt.js you might find that the framework's core functionality is not enough. Nuxt.js can be extended with configuration options and plugins, but maintaining these customizations across multiple projects is tedious, repetitive and time-consuming. On the other hand, supporting every project's needs out of the box would make Nuxt.js very complex and hard to use.
 

nuxtjs.org/content/0.docs/5.configuration-glossary/4.configuration-cli.md

@@ -18,7 +18,7 @@ cli: {
 }
 ```
 
-:img{src="/img/docs/cli-badge.png"}
+![](/img/docs/cli-badge.png)
 
 ## bannerColor
 

nuxtjs.org/content/0.docs/8.deployment/12.heroku.md

@@ -29,7 +29,7 @@ heroku config:set HOST=0.0.0.0
 
 Your app's Settings section on the Heroku dashboard should contain this:
 
-:img{src="https://user-images.githubusercontent.com/23453691/116850762-81ea0e00-abf1-11eb-9f70-260721a1d525.png" alt="nuxt config vars Heroku"}
+![nuxt config vars Heroku](https://user-images.githubusercontent.com/23453691/116850762-81ea0e00-abf1-11eb-9f70-260721a1d525.png)
 
 Finally, we can push the app on Heroku with:
 

nuxtjs.org/content/0.docs/8.deployment/13.hostman.md

@@ -31,7 +31,7 @@ This guide assumes you already have a Nuxt project to deploy. If you need a proj
 
 To deploy a Nuxt static website, click Create in the top-left corner of your [Dashboard](https://dashboard.hostman.com/) and choose Front-end app or static website.
 
-:img{src="https://i.imgur.com/bEePHDo.png" alt="Hostman dashboard"}
+![Hostman dashboard](https://i.imgur.com/bEePHDo.png)
 
 <strong>Step 2. Select the project to deploy</strong>
 
@@ -47,7 +47,7 @@ If you didn’t use your Git account credentials to log in, you’ll be able to
 
 Next, the Website customization window will appear.
 
-:img{src="https://i.imgur.com/gIgl5EH.png" alt="Build configuration"}
+![Build configuration](https://i.imgur.com/gIgl5EH.png)
 
 Choose the <strong>Static website</strong> option from the list of frameworks.
 
@@ -71,7 +71,7 @@ Usually the log contains all the debugging data you'll need, but we are also her
 
 When the deployment is complete, you will receive an e-mail notification and also see a similar log entry:
 
-:img{src="https://i.imgur.com/KwzMxTb.png" alt="Log entry"}
+![Log entry](https://i.imgur.com/KwzMxTb.png)
 
 <strong>All done!</strong>
 

nuxtjs.org/content/0.docs/8.deployment/22.vercel.md

@@ -7,7 +7,7 @@ target: Static & Server
 category: deployment
 ---
 
-:img{src="https://user-images.githubusercontent.com/904724/61308402-7a752d00-a7f0-11e9-9502-23731ccd00fd.png" alt="nuxt-vercel-builder"}
+![nuxt-vercel-builder](https://user-images.githubusercontent.com/904724/61308402-7a752d00-a7f0-11e9-9502-23731ccd00fd.png)
 
 
 ## Static site with Vercel

nuxtjs.org/content/0.docs/8.deployment/9.github-pages.md

@@ -150,15 +150,15 @@ On completion, you'll see your `gh-pages` branch updated as well as your site.
 
 To deploy with [Travis CI](https://travis-ci.org/), a free for open source projects build server, sign in via your GitHub account, granting Travis access to view your repositories, and then enable the build server for your repository by toggling the switch next to your repositories name in the list displayed.
 
-:img{src="/img/docs/github_pages_travis_01.png" alt="Travis Builder Server Enable"}
+![Travis Builder Server Enable](/img/docs/github_pages_travis_01.png)
 
 Next, click the cog icon beside your repository name to configure the general settings of the build sever and enable the 'Build only if .travis.yml is present' feature by toggling the switch.
 
-:img{src="/img/docs/github_pages_travis_02.png" alt="Travis Builder Server Settings"}
+![Travis Builder Server Settings](/img/docs/github_pages_travis_02.png)
 
 On the same screen, scroll down to the Environment Variables section and create a new variables named `GITHUB_ACCESS_TOKEN` and in the value field paste a copy of the GitHub personal access token your created earlier and click the 'Add' button.
 
-:img{src="/img/docs/github_pages_travis_03.png" alt="Travis Builder Server Environment Variables"}
+![Travis Builder Server Environment Variables](/img/docs/github_pages_travis_03.png)
 
 Finally, create a `.travis.yml` configuration file in the root of your repository with the following contents
 
@@ -202,7 +202,7 @@ git push origin
 
 Now, whenever you commit any changes to your repository, from within Travis, you'll see a new build start up
 
-:img{src="/img/docs/github_pages_travis_04.png" alt="Travis Builder Server Output"}
+![Travis Builder Server Output](/img/docs/github_pages_travis_04.png)
 
 and on completion, you'll see your GitHub pages site automatically updated.
 
@@ -212,7 +212,7 @@ To deploy via [Appveyor](https://www.appveyor.com), another free for open source
 
 Once signed in, click the 'New project' link and then click the 'Add' button beside your repository name in the list displayed to enable the build server on your repository.
 
-:img{src="/img/docs/github_pages_appveyor_01.png" alt="Appveyor Builder Server Enable"}
+![Appveyor Builder Server Enable](/img/docs/github_pages_appveyor_01.png)
 
 Next, in the root of your repository, create an `appveyor.yml` configuration file with the following contents
 
@@ -267,6 +267,6 @@ git push origin
 
 Now, whenever you commit any changes to your repository, from within Appveyor, you'll see a new build start up
 
-:img{src="/img/docs/github_pages_appveyor_02.png" alt="Appveyor Builder Server Output"}
+![Appveyor Builder Server Output](/img/docs/github_pages_appveyor_02.png)
 
 and on completion, you'll see your GitHub pages site automatically updated.

nuxtjs.org/content/2.blog/1.case-study-livementor.md

@@ -48,7 +48,7 @@ We are focused like crazy on reactivity because all our pedagogical experience,
 
 The Firebase plus Nuxt combo made it much better.
 
-:img{src="/blog/case-study-livementor/mockup-m1-3.png" alt="Livementor dashboard"}
+![Livementor dashboard](/blog/case-study-livementor/mockup-m1-3.png)
 
 ### What is your favorite feature?
 

nuxtjs.org/content/2.blog/11.understanding-how-fetch-works-in-nuxt-2-12.md

@@ -26,7 +26,7 @@ In this post, we will explore different features of the fetch hook and try to un
 
 In terms of Nuxt lifecycle hooks, `fetch` sits within Vue lifecycle after `created` hook. As we already know that, all Vue lifecycle hooks are called with their `this` context. The same applies to `fetch` hook as well.
 
-:img{src="/blog/understanding-how-fetch-works-in-nuxt-2-12/new-fetch-lifecycle-hooks.png" alt="New fetch in Nuxt lifecycle"}
+![New fetch in Nuxt lifecycle](/blog/understanding-how-fetch-works-in-nuxt-2-12/new-fetch-lifecycle-hooks.png)
 
 Fetch hook is called after the component instance is created on the server-side. That makes `this` context available inside the `fetch`.
 

nuxtjs.org/content/2.blog/12.nuxtjs-from-terminal-to-browser.md

@@ -29,15 +29,15 @@ _ℹ️ These features are all available with [v2.8.0 release](https://github.co
 
 1.  Forwarding Webpack build state right in the browser and display them in a fancy manner.
 
-:img{src="https://res.cloudinary.com/practicaldev/image/fetch/s--1u6wSHPt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://user-images.githubusercontent.com/904724/58880743-ec7a3280-86d8-11e9-8856-8d9d22b89b70.gif" alt="foward-webpack-build-state"}
+![foward-webpack-build-state](https://res.cloudinary.com/practicaldev/image/fetch/s--1u6wSHPt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://user-images.githubusercontent.com/904724/58880743-ec7a3280-86d8-11e9-8856-8d9d22b89b70.gif)
 
 2.  Same for Hot Module Replacement (really useful when the project gets bigger and takes more time to re-build).
 
-:img{src="https://res.cloudinary.com/practicaldev/image/fetch/s--faVtF222--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://user-images.githubusercontent.com/904724/58547105-129a6100-8207-11e9-9c61-a93956a17727.gif" alt="nuxt-build-indicator-hmr"}
+![nuxt-build-indicator-hmr](https://res.cloudinary.com/practicaldev/image/fetch/s--faVtF222--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://user-images.githubusercontent.com/904724/58547105-129a6100-8207-11e9-9c61-a93956a17727.gif)
 
 3.  Forwarding SSR logs to the browser in development mode
 
-:img{src="https://res.cloudinary.com/practicaldev/image/fetch/s--bwQ8iEq2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://user-images.githubusercontent.com/904724/58566291-a3396700-8230-11e9-9dd6-09c3ff8578d2.gif" alt="nuxt-ssr-logs-forwarding"}
+![nuxt-ssr-logs-forwarding](https://res.cloudinary.com/practicaldev/image/fetch/s--bwQ8iEq2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://user-images.githubusercontent.com/904724/58566291-a3396700-8230-11e9-9dd6-09c3ff8578d2.gif)
 
 ## [](#nuxtjs-vision)Nuxt Vision
 

nuxtjs.org/content/2.blog/13.introducing-smart-prefetching.md

@@ -21,7 +21,7 @@ category: Release
 
 Starting from [Nuxt v2.4.0](https://github.com/nuxt/nuxt.js/releases/tag/v2.4.0), Nuxt.js will automagically prefetch the code-splitted pages linked with `<nuxt-link>` when visible in the viewport **by default**. This hugely improves the end user performances, inspired by [quicklink](https://github.com/GoogleChromeLabs/quicklink).
 
-:img{src="https://res.cloudinary.com/practicaldev/image/fetch/s--jP7Crsw7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://user-images.githubusercontent.com/904724/51692960-4158be80-1ffe-11e9-9299-61881d06412e.gif" alt="nuxt-prefetch-comparison"}
+![nuxt-prefetch-comparison](https://res.cloudinary.com/practicaldev/image/fetch/s--jP7Crsw7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://user-images.githubusercontent.com/904724/51692960-4158be80-1ffe-11e9-9299-61881d06412e.gif)
 
 Demos are online and we recommend you to try it out to feel the difference:
 

nuxtjs.org/content/2.blog/2.creating-a-nuxt-module.md

@@ -53,7 +53,7 @@ This module has already been created and deployed and you can use it without cre
 
 ngrok will create a http-https-tcp tunnel. Check out the [ngrok npm package](https://www.npmjs.com/package/ngrok) for more details. We need to be able to connect to an ngrok port when the Nuxt server is listening. Once we get a public URL we want to print it to the Nuxt CLI so we can easily click it to open and share it.
 
-:img{src="/blog/creating-nuxt-module/nuxt-cli.png" alt="nuxt cli"}
+![nuxt cli](/blog/creating-nuxt-module/nuxt-cli.png)
 
 ## Let's get started
 
@@ -350,7 +350,7 @@ import chalk from 'chalk'
 
 You will now see when running the dev command that we have our Public URL with the link underlined and in a yellow color. This can then be clicked and opened and of course shared with anyone, anywhere in the world so they can watch your changes in dev mode live.
 
-:img{src="/blog/creating-nuxt-module/nuxt-cli.png" alt="nuxt cli"}
+![nuxt cli](/blog/creating-nuxt-module/nuxt-cli.png)
 
 ## Closing our ngrok
 

nuxtjs.org/content/2.blog/4.creating-blog-with-nuxt-content.md

@@ -168,7 +168,7 @@ To display our content we are using the `<nuxt-content />` component by passing
 
 We can now run our dev server and go to the route [http://localhost:3000/blog/my-first-blog-post](http://localhost:3000/blog/my-first-blog-post) and we should see our content from our markdown file.
 
-:img{src="/blog/creating-blog-with-nuxt-content/get-started-with-nuxt-content.png" alt="content from markdown"}
+![content from markdown](/blog/creating-blog-with-nuxt-content/get-started-with-nuxt-content.png)
 
 ### Default Injected variables
 

nuxtjs.org/content/2.blog/5.improve-your-developer-experience-with-nuxt-components.md

@@ -96,7 +96,7 @@ Minimal configuration above is enough to get you started. However, like any othe
 
 ## Cheatsheet
 
-:img{src="https://cdn.krutiepatel.com/2020-06/nuxt_components_Module-Cheatsheet.png" alt="One-page summary of @nuxt/components module"}
+![One-page summary of @nuxt/components module](https://cdn.krutiepatel.com/2020-06/nuxt_components_Module-Cheatsheet.png)
 
 > [Download printable PDF here](https://cdn.krutiepatel.com/2020-06/nuxt_components_Module-Cheatsheet.pdf)
 
@@ -379,7 +379,7 @@ Lazy loading is already implemented at `/pages/lazy-loading-example.vue`
 
 Here, you can see that lazy components are loaded when the data becomes available, and they have their own separate bundles. See `List.js, ListItem.js` and `ListItemIcon.js` in the screenshot below.
 
-:img{src="https://cdn.krutiepatel.com/2020-06/lazy-loading-with-nuxt-components.png" alt="Lazy loading with nuxt/components"}
+![Lazy loading with nuxt/components](https://cdn.krutiepatel.com/2020-06/lazy-loading-with-nuxt-components.png)
 
 ## Third-party component library
 

nuxtjs.org/content/2.blog/8.going-dark-with-nuxtjs-color-mode.md

@@ -236,7 +236,7 @@ Let's import our component into our index.vue page so we can see what is happeni
 
 And in our browser under `http://localhost:3000` you will see our list of colors.
 
-:img{src="/blog/going-dark-with-nuxtjs-color-mode/list-of-colors.png" alt="list of colors"}
+![list of colors](/blog/going-dark-with-nuxtjs-color-mode/list-of-colors.png)
 
 ### Adding a click event to change our colors
 

nuxtjs.org/content/support.md

@@ -18,7 +18,7 @@ Technical support
 Get project audits, app deployments, custom development and technical support from the NuxtJS team.
 
 ---subdescription
-We partnered with :img{class="inline-block px-1 -mt-1 dark:hidden" src="/img/support/light/otechie.svg"} :img{class="inline-block px-1 -mt-1 light:hidden" src="/img/support/dark/otechie.svg"} to offer these services so we can focus on helping you as fast as possible.
+We partnered with ![](/img/support/light/otechie.svg){.inline-block.px-1.-mt-1.dark:hidden} ![](/img/support/dark/otechie.svg){.inline-block.px-1.-mt-1.light:hidden} to offer these services so we can focus on helping you as fast as possible.
 
 ---price
 250$