Commit 15c8e1313f61b843f51d08c48dbd102ff4a195bc
1 parent
3994f4bb
Exists in
master
and in
1 other branch
文档添加锚点
Showing
5 changed files
with
46 additions
and
1 deletions
Show diff stats
examples/router/index.js
examples/styles/markdown.scss
package.json
| ... | ... | @@ -20,9 +20,11 @@ |
| 20 | 20 | "devDependencies": { |
| 21 | 21 | "@vue/cli-plugin-babel": "^3.8.0", |
| 22 | 22 | "@vue/cli-service": "^3.8.0", |
| 23 | + "markdown-it-anchor": "^5.2.4", | |
| 23 | 24 | "markdown-it-container": "^2.0.0", |
| 24 | 25 | "sass": "^1.18.0", |
| 25 | 26 | "sass-loader": "^7.1.0", |
| 27 | + "transliteration": "^2.1.5", | |
| 26 | 28 | "vue-markdown-loader": "^2.4.1", |
| 27 | 29 | "vue-template-compiler": "^2.6.10" |
| 28 | 30 | } | ... | ... |
webpack/markdown-loader.js
| 1 | 1 | const MarkdownIt = require("markdown-it"); |
| 2 | +const MarkdownItAnchor = require('markdown-it-anchor') | |
| 2 | 3 | const MarkdownItContainer = require("markdown-it-container"); |
| 3 | 4 | const VueTemplateComplier = require("vue-template-compiler"); |
| 4 | 5 | const hljs = require("highlight.js"); |
| 6 | +const slugify = require('transliteration').slugify; // 引入transliteration中的slugify方法 | |
| 5 | 7 | const { parse, compileTemplate } = require("@vue/component-compiler-utils"); |
| 6 | 8 | |
| 7 | 9 | module.exports = function(source) { |
| ... | ... | @@ -22,6 +24,14 @@ module.exports = function(source) { |
| 22 | 24 | )}</code></pre>`; |
| 23 | 25 | } |
| 24 | 26 | }); |
| 27 | + // 使用【markdown-it-anchor】插件为markdown创建锚点 | |
| 28 | + markdownIt.use(MarkdownItAnchor, { | |
| 29 | + level: 2, // 添加超链接锚点的最小标题级别, 如: #标题 不会添加锚点 | |
| 30 | + slugify: slugify, // 自定义slugify, 我们使用的是将中文转为汉语拼音,最终生成为标题id属性 | |
| 31 | + permalink: true, // 开启标题锚点功能 | |
| 32 | + // permalinkBefore: true, // 在标题前创建锚点 | |
| 33 | + permalinkSymbol: '#', // 锚点标志 | |
| 34 | + }); | |
| 25 | 35 | // 使用【markdown-it-container】插件解析【:::snippet :::】代码块为vue渲染 |
| 26 | 36 | markdownIt.use(MarkdownItContainer, "snippet", { |
| 27 | 37 | // 验证代码块为【:::snippet :::】才进行渲染 | ... | ... |
yarn.lock
| ... | ... | @@ -4649,6 +4649,11 @@ map-visit@^1.0.0: |
| 4649 | 4649 | dependencies: |
| 4650 | 4650 | object-visit "^1.0.0" |
| 4651 | 4651 | |
| 4652 | +markdown-it-anchor@^5.2.4: | |
| 4653 | + version "5.2.4" | |
| 4654 | + resolved "https://registry.npm.taobao.org/markdown-it-anchor/download/markdown-it-anchor-5.2.4.tgz#d39306fe4c199705b4479d3036842cf34dcba24f" | |
| 4655 | + integrity sha1-05MG/kwZlwW0R50wNoQs803Lok8= | |
| 4656 | + | |
| 4652 | 4657 | markdown-it-container@^2.0.0: |
| 4653 | 4658 | version "2.0.0" |
| 4654 | 4659 | resolved "https://registry.npm.taobao.org/markdown-it-container/download/markdown-it-container-2.0.0.tgz#0019b43fd02eefece2f1960a2895fba81a404695" |
| ... | ... | @@ -7255,6 +7260,13 @@ tr46@~0.0.1: |
| 7255 | 7260 | resolved "https://registry.npm.taobao.org/tr46/download/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a" |
| 7256 | 7261 | integrity sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o= |
| 7257 | 7262 | |
| 7263 | +transliteration@^2.1.5: | |
| 7264 | + version "2.1.5" | |
| 7265 | + resolved "https://registry.npm.taobao.org/transliteration/download/transliteration-2.1.5.tgz#79318af9d1bb1b72e1f2b1a7f37be79a33d5fc4a" | |
| 7266 | + integrity sha1-eTGK+dG7G3Lh8rGn83vnmjPV/Eo= | |
| 7267 | + dependencies: | |
| 7268 | + yargs "^13.2.4" | |
| 7269 | + | |
| 7258 | 7270 | trim-right@^1.0.1: |
| 7259 | 7271 | version "1.0.1" |
| 7260 | 7272 | resolved "https://registry.npm.taobao.org/trim-right/download/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003" |
| ... | ... | @@ -7862,7 +7874,7 @@ yargs-parser@^11.1.1: |
| 7862 | 7874 | camelcase "^5.0.0" |
| 7863 | 7875 | decamelize "^1.2.0" |
| 7864 | 7876 | |
| 7865 | -yargs-parser@^13.1.0: | |
| 7877 | +yargs-parser@^13.1.0, yargs-parser@^13.1.1: | |
| 7866 | 7878 | version "13.1.1" |
| 7867 | 7879 | resolved "https://registry.npm.taobao.org/yargs-parser/download/yargs-parser-13.1.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fyargs-parser%2Fdownload%2Fyargs-parser-13.1.1.tgz#d26058532aa06d365fe091f6a1fc06b2f7e5eca0" |
| 7868 | 7880 | integrity sha1-0mBYUyqgbTZf4JH2ofwGsvfl7KA= |
| ... | ... | @@ -7904,3 +7916,19 @@ yargs@^13.0.0: |
| 7904 | 7916 | which-module "^2.0.0" |
| 7905 | 7917 | y18n "^4.0.0" |
| 7906 | 7918 | yargs-parser "^13.1.0" |
| 7919 | + | |
| 7920 | +yargs@^13.2.4: | |
| 7921 | + version "13.3.0" | |
| 7922 | + resolved "https://registry.npm.taobao.org/yargs/download/yargs-13.3.0.tgz#4c657a55e07e5f2cf947f8a366567c04a0dedc83" | |
| 7923 | + integrity sha1-TGV6VeB+Xyz5R/ijZlZ8BKDe3IM= | |
| 7924 | + dependencies: | |
| 7925 | + cliui "^5.0.0" | |
| 7926 | + find-up "^3.0.0" | |
| 7927 | + get-caller-file "^2.0.1" | |
| 7928 | + require-directory "^2.1.1" | |
| 7929 | + require-main-filename "^2.0.0" | |
| 7930 | + set-blocking "^2.0.0" | |
| 7931 | + string-width "^3.0.0" | |
| 7932 | + which-module "^2.0.0" | |
| 7933 | + y18n "^4.0.0" | |
| 7934 | + yargs-parser "^13.1.1" | ... | ... |