fix(markdown): support vue's @ attribute names (#249)

* feat(marked): support `@` in attribute names

* docs: using `@` shorthand

* chore: add comment for modified

* docs: remove `trade-off` section

Author: 2nthony

src/utils/marked.js

@@ -583,7 +583,11 @@ inline.autolink = edit(inline.autolink)
   .replace('email', inline._email)
   .getRegex()
 
-inline._attribute = /\s+[a-zA-Z:_][\w.:-]*(?:\s*=\s*"[^"]*"|\s*=\s*'[^']*'|\s*=\s*[^\s"'=<>`]+)?/
+// @modified
+// old
+// inline._attribute = /\s+[a-zA-Z:_][\w.:-]*(?:\s*=\s*"[^"]*"|\s*=\s*'[^']*'|\s*=\s*[^\s"'=<>`]+)?/
+// new for support `@` attribute names
+inline._attribute = /\s+[a-zA-Z@:_][\w.:-]*(?:\s*=\s*"[^"]*"|\s*=\s*'[^']*'|\s*=\s*[^\s"'=<>`]+)?/
 
 inline.tag = edit(inline.tag)
   .replace('comment', block._comment)

website/docs/builtin-components.md

@@ -152,7 +152,7 @@ A customized `<select>` component:
 
 <!-- prettier-ignore -->
 ````vue
-<docute-select :value="favoriteFruit" v-on:change="handleChange">
+<docute-select :value="favoriteFruit" @change="handleChange">
   <option value="apple" :selected="favoriteFruit === 'apple'">Apple</option>
   <option value="banana" :selected="favoriteFruit === 'banana'">Banana</option>
   <option value="watermelon" :selected="favoriteFruit === 'watermelon'">Watermelon</option>
@@ -176,7 +176,7 @@ module.exports = {
 ```
 ````
 
-<docute-select v-on:change="handleChange" :value="favoriteFruit">
+<docute-select @change="handleChange" :value="favoriteFruit">
   <option value="apple" :selected="favoriteFruit === 'apple'">Apple</option>
   <option value="banana" :selected="favoriteFruit === 'banana'">Banana</option>
   <option value="watermelon" :selected="favoriteFruit === 'watermelon'">Watermelon</option>

website/docs/guide/customization.md

@@ -131,7 +131,7 @@ Apply custom fonts to your website is pretty easy, you can simply add a `<style>
 </style>
 ```
 
-<button v-on:click="insertCustomFontsCSS">Click me</button> to toggle the custom fonts on this website.
+<button @click="insertCustomFontsCSS">Click me</button> to toggle the custom fonts on this website.
 
 By default a fresh Docute website will use system default fonts.
 

website/docs/guide/markdown-features.md

@@ -174,7 +174,7 @@ class SkinnedMesh extends THREE.Mesh {
 Adding a Vue mixin to the Markdown component:
 
 ````markdown
-<button v-on:click="count++">{{ count }}</button> people love Docute.
+<button @click="count++">{{ count }}</button> people love Docute.
 
 ```js {mixin:true}
 {
@@ -187,7 +187,7 @@ Adding a Vue mixin to the Markdown component:
 ```
 ````
 
-<button v-on:click="count++">{{ count }}</button> people love Docute.
+<button @click="count++">{{ count }}</button> people love Docute.
 
 ```js {mixin:true}
 {

website/docs/guide/use-vue-in-markdown.md

@@ -80,8 +80,3 @@ __Output__:
 
 <ReverseText text="hello world" />
 
-## Trade-offs
-
-- `@` shorthand won't work
-
-Since standard HTML attribute isn't allowed to start with `@`, the `@` shorthand for `v-on` directive won't be recognized as valid HTML by the markdown parser we use. Pull request is very welcome for fixing this.

website/docs/zh/builtin-components.md

@@ -151,7 +151,7 @@ A customized `<select>` component:
 
 <!-- prettier-ignore -->
 ````vue
-<docute-select :value="favoriteFruit" v-on:change="handleChange">
+<docute-select :value="favoriteFruit" @change="handleChange">
   <option value="apple" :selected="favoriteFruit === 'apple'">Apple</option>
   <option value="banana" :selected="favoriteFruit === 'banana'">Banana</option>
   <option value="watermelon" :selected="favoriteFruit === 'watermelon'">Watermelon</option>
@@ -175,7 +175,7 @@ module.exports = {
 ```
 ````
 
-<docute-select v-on:change="handleChange" :value="favoriteFruit">
+<docute-select @change="handleChange" :value="favoriteFruit">
   <option value="apple" :selected="favoriteFruit === 'apple'">Apple</option>
   <option value="banana" :selected="favoriteFruit === 'banana'">Banana</option>
   <option value="watermelon" :selected="favoriteFruit === 'watermelon'">Watermelon</option>

website/docs/zh/guide/customization.md

@@ -125,7 +125,7 @@ body {
 </style>
 ```
 
-<button v-on:click="insertCustomFontsCSS">Click me</button> to toggle the custom fonts on this website.
+<button @click="insertCustomFontsCSS">Click me</button> to toggle the custom fonts on this website.
 
 By default a fresh Docute website will use system default fonts.
 

website/docs/zh/guide/markdown-features.md

@@ -171,7 +171,7 @@ class SkinnedMesh extends THREE.Mesh {
 Adding a Vue mixin to the Markdown component:
 
 ````markdown
-<button v-on:click="count++">{{ count }}</button> people love Docute.
+<button @click="count++">{{ count }}</button> people love Docute.
 
 ```js {mixin:true}
 {
@@ -184,7 +184,7 @@ Adding a Vue mixin to the Markdown component:
 ```
 ````
 
-<button v-on:click="count++">{{ count }}</button> people love Docute.
+<button @click="count++">{{ count }}</button> people love Docute.
 
 ```js {mixin:true}
 {

website/docs/zh/guide/use-vue-in-markdown.md

@@ -80,8 +80,3 @@ __输出__:
 
 <ReverseText text="hello world" />
 
-## Trade-offs
-
-- `@` 简写语法不能工作
-
-由于标准的 HTML 属性不允许以 `@` 开头，因此我们使用的 markdown 解析器不会将 `v-on` 的简写 `@` 识别为有效的 HTML。非常欢迎大家发起 Pull Request 解决该问题。