精华内容
下载资源
问答
  • npm install markdown-it-vue 支持 图像大小和查看器 官方降价语法。 GFM目录 GFM风格 表情符号 仅简单 Flowcharts.js 下标/上标 信息| 错误警告信息提示 插件清单 降价 降价表情符号 降价促销 降价促销 脚注降价...
  • markdown-it-vue The vue lib for markdown-it. Demo online http://www.aqcoder.com/markdown Install npm install markdown-it-vue Supports Image size and Viewer Official markdown syntax. GFM TOC GFM...
  • 项目地址: ...markdown-it-vue 是一个丰富的 markdown Vue 组件,markdown-it-vue 使用 markdown-it 作为 Markdown 数据解析引擎,整合多种 markdown-it 插件,并内置了一些自己的功能性插件,支持 GFM ...

    项目地址: https://github.com/ravenq/markdown-it-vue
    Build Status

    Markdonw Vue 组件库.

    markdown-it-vue 是一个丰富的 markdown Vue 组件,markdown-it-vue 使用 markdown-it 作为 Markdown 数据解析引擎,整合多种 markdown-it 插件,并内置了一些自己的功能性插件,支持 GFM TOC、GFM style、emoji等通用特性,还支持 mermaid charts、Echarts、flowchart.js 等多种图表,支持 AsciiMath、Latex 等数学公式渲染,支持 errro | warning | info 个性化提示。

    在线示例

    http://www.aqcoder.com/markdown

    安装

    npm install markdown-it-vue
    

    特性

    • Official markdown syntax.
    • GFM TOC
    • GFM style
    • emoji
    • mermaid charts
    • Echarts
    • Flowcharts.js
    • Subscript/Superscript
    • AsciiMath
    • info | error | warning message tip

    使用的插件

    • markdown-it
    • markdown-it-emoji
    • markdown-it-sub
    • markdown-it-sup
    • markdown-it-footnote
    • markdown-it-deflist
    • markdown-it-abbr
    • markdown-it-ins
    • markdown-it-mark
    • markdown-it-katex
    • markdown-it-task-lists
    • markdown-it-icons
    • markdown-it-highlight
    • markdown-it-latex
    • markdown-it-container
    • markdown-it-github-toc
    • markdown-it-source-map

    使用示例

    <template>
      <div>
        <markdown-it-vue class="md-body" :content="content"/>
      </div>
    </template>
    
    <script>
    import MarkdownItVue from 'markdown-it-vue'
    import 'markdown-it-vue/dist/markdown-it-vue.css'
    export default {
      components: {
        MarkdownItVue
      },
      data () {
        return {
          content: '# your markdown content'
        }
      }
    }
    </script>
    

    示例截图

    markdown-it-vue

    License

    MIT

    ravenq

    展开全文
  • 一个基于markdown-it高度可扩展的vue编辑器组件 允许提供插槽自定义工具栏 允许通过动态注册组件,允许插入工具栏指定位置 优势:可完全自定义工具栏功能,markdown-it插件调用等 安装 $ npm install vue-bl-...
  • 1.npm install --save uslug markdown-it markdown-it-toc-and-anchor 2. 主要代码 <template> <div id="lab_exp_book"> ... ... <div class="directory_box"&...

    1. npm install --save uslug markdown-it markdown-it-toc-and-anchor

    2. 主要代码

    • <template>
        <div id="lab_exp_book">
      
              ... ...
      
                <div class="directory_box">
                  <div class="directory_title">目录</div>
                  <ul class="directory_ul">
                    <li v-for="(item, index) in tocShow" :key="index">
                      <div v-if="item.children.length===0">
                        <a :class="{active: curContentScrollTop===item.anchorY}" class="lab_section_class hover_change_color"
                           @click="handleDirClick(item)" href="javascript:">{{item.nodeName}}</a>
                      </div>
      
                      <div v-else>
                        <div :class="{active: curContentScrollTop===item.anchorY || (!item.anchorY && index === 0)}" class="lab_section_title hover_change_color"
                             @click="handleDirClick(item)">{{item.nodeName}}</div>
                        <ul class="lab_section_children">
                          <li v-for="(each, index) in item.children" :key="index">
                            <div v-if="each.children.length===0">
                              <a  :class="{active: curContentScrollTop===each.anchorY}" class="lab_section_class hover_change_color"
                                  @click="handleDirClick(each)" href="javascript:">{{each.nodeName}}</a>
                            </div>
      
                            <div v-else>
                              <div :class="{active: curContentScrollTop===each.anchorY}" class="lab_section_title hover_change_color"
                                   @click="handleDirClick(each)">{{each.nodeName}}</div>
                              <ul class="lab_section_children">
                                <li v-for="(third, index) in each.children" :key="index">
                                  <div>
                                    <a  :class="{active: curContentScrollTop===third.anchorY}" class="lab_section_class hover_change_color"
                                        @click="handleDirClick(third)" href="javascript:">{{third.nodeName}}</a>
                                  </div>
                                </li>
                              </ul>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </li>
                  </ul>
      
                  <div class="directory_tips">开始学习后可阅读实验手册内容</div>
                </div>
              </div>
      
              <div class="right_book_content" ref="rightBookContent">
                <div class="book_box" v-if="1">
                  <div class="lab_simple_content clearfix" v-html="htmlStr">
                  </div>
                </div>
      
              ... ...
      
        </div>
      </template>
      
      <script>
        import uslug from 'uslug'
        import MarkdownIt from 'markdown-it'
        import markdownItTocAndAnchor from 'markdown-it-toc-and-anchor'
        data () {
            return {
               mdStr: '相关md字符串',
               htmlStr: '',    // 渲染到页面
               tocArray: [],
               tocShow: [],    // 渲染到页面
               isFirstClickDir: true,
               curContentScrollTop: 2
            }
        },
          computed: {
            ...mapState({
              labDirectory: state => state.lab.labDirectory
            })
          },
          watch: {
            tocArray: {
              deep: true,
              handler (newValue) {
                const oldArr = JSON.parse(JSON.stringify(newValue))
      
                let tocArr = []
                let cur1Arr = null
                let cur2Arr = null
                let cur3Arr = null
                let cur4Arr = null
                let cur5Arr = null
                oldArr.reduce((newArr, next) => {
                  if (next.level === 2) {
                    cur1Arr = JSON.parse(JSON.stringify(next))
                    cur1Arr.children = []
                    cur1Arr.nodeName = cur1Arr.content
                    cur2Arr = cur1Arr.children
                    tocArr.push(cur1Arr)
                  } else if (next.level === 3) {
                    cur3Arr = JSON.parse(JSON.stringify(next))
                    cur3Arr.children = []
                    cur3Arr.nodeName = cur3Arr.content
                    cur4Arr = cur3Arr.children
                    cur2Arr.push(cur3Arr)
                  } else if (next.level === 4) {
                    cur5Arr = JSON.parse(JSON.stringify(next))
                    cur5Arr.children = []
                    cur5Arr.nodeName = cur5Arr.content
                    // cur6Arr = cur5Arr.children
                    cur4Arr.push(cur5Arr)
                  }
                  return newArr
                }, [])
      
                this.tocShow = tocArr
              }
            }
          },
          async mounted () {
            this.myConsole('_labExpBookInit')
            this._initLabExpBook()
            await this.$store.dispatch('getLabDirectory')
          },
          methods: {
            _uslugify(x) {
              return uslug(x)
            },
            _initLabExpBook () {
              let md = new MarkdownIt({
                html: false,
                xhtmlOut: true,
                typographer: true
              })
      
              md.use(markdownItTocAndAnchor, {slugify: this._uslugify})
      
              this.htmlStr = md.set({
                tocCallback: (tocMarkdown, tocArray, tocHtml) => {
                  this.tocArray = tocArray
                }
              }).render(this.mdStr)
            },
            handleDirClick(dirNode) {
              window.scrollTo(0, 502)
              if (this.isFirstClickDir) {
                this.isFirstClickDir = false
                this._initDirScrollPos()
                bindEventFunc(this.$refs.rightBookContent, 'scroll', () => {
                  this.curContentScrollTop = this.$refs.rightBookContent.scrollTop
                })
              }
              this.$refs.rightBookContent.scrollTo({ top: dirNode.anchorY, left: 0, behavior: 'smooth' })
            },
            _initDirScrollPos () {
              this.tocShow = this.tocShow.map((ele) => {
                myConsole(ele.anchor)
                this._addAnchorY(ele)
                if (ele.children.length > 0) {
                  ele.children.forEach((each, i) => {
                    myConsole(ele.children[i].anchor)
                    this._addAnchorY(ele.children[i])
                    if (each.children.length > 0) {
                      each.children.forEach((one, j) => {
                        myConsole(ele.children[i].children[j].anchor)
                        this._addAnchorY(ele.children[i].children[j])
                      })
                    }
                  })
                }
                return ele
              })
            },
            _addAnchorY (ele) {
              ele.anchorY = document.getElementById(ele.anchor).getBoundingClientRect().top - 120
            }
          ... ...
      </script>

    3. 效果截图

     

    转载于:https://www.cnblogs.com/tianxiaxuange/p/10908230.html

    展开全文
  • 完美降价 (perfect-markdown) perfect-markdown is a markdown editor based on Vue... markdown-it. The core is inspired by the implementation of mavonEditor, so perfect-markdown has almost all of the func...

    完美降价 (perfect-markdown)

    perfect-markdown is a markdown editor based on Vue & markdown-it. The core is inspired by the implementation of mavonEditor, so perfect-markdown has almost all of the functions of mavonEditor. What's more, perfect-markdown also extends some features based on mavonEditor.

    perfect-markdown是基于Vue和markdown-it的Markdown编辑器。 核心灵感来自mavonEditor的实现,因此perfect-markdown几乎具有mavonEditor的所有功能。 此外,perfect-markdown还基于mavonEditor扩展了一些功能。

    安装完美降价 (Install perfect-markdown)

    $ npm install perfect-markdown --save

    用法 (Usage)

    main.js:

    main.js

    import Vue from 'vue'
        import store from '@/store' // vuex is required in perfect-markdown
        import pmd from 'perfect-markdown'
        // use
        Vue.use(pmd, { store }) // register pmd vuex module

    editor.vue

    editor.vue

    <div id="main">
        <pmd
            v-model="value"
            :showToolbar="true"
            :showTextarea="true"
            :uploadImgFn="uploadFn"
            :uploadFileFn="uploadFn"
            :plugins="{katex: true}"
            :imgWidthHeightAttr="{width: true, height: false}"
        ></pmd>
    </div>

    webpack.base.conf.js

    webpack.base.conf.js

    {
            test: /\.md$/,
            loader: 'raw-loader'
        }

    API (API)

    道具 (props)

    name type default describe
    value String '' textarea value
    showToolbar Boolean true show toolbar
    showTextarea Boolean true show the textarea
    uploadImgFn Function funtion uploadImg
    uploadFileFn Function funtion uploadFile
    plugins Object {} katex or mathjax plugin, { katex: true } or { mathjax: true }. (mathjax is more powerful than katex, but it rendering efficiency is lower)
    customLeftToolbar Boolean false
    customRightToolbar Boolean false
    imgWidthHeightAttr Object {width: false, height: false} this is default output [name](url), and all true will output [name =WxH](url)
    ... ... ... ....
    名称 类型 默认 描述
    '' 文本值
    showToolbar 布尔型 真正 显示工具栏
    showTextarea 布尔型 真正 显示文字区域
    uploadImgFn 功能 功能 uploadImg
    uploadFileFn 功能 功能 上传文件
    外挂程式 目的 {} katex或mathjax插件,{katex:true}或{mathjax:true}。 (mathjax比katex更强大,但渲染效率较低)
    customLeftToolbar 布尔型
    customRightToolbar 布尔型
    imgWidthHeightAttr 目的 {宽度:假,高度:假} 这是默认输出[name](url),所有true都会输出[name = WxH](url)
    ... ... ... ....

    上传img文件 (upload img file)

    <div>
        <pmd ref=md :uploadImgFn="imgFn" :uploadFileFn="fileFn"></pmd>
    </div>
    export default {
        methods: {
    
            imgFn(payload) {
                const ret = await this.upload(payload); // the payload has the file(File) param from pmd
                return {
                    upload: true, // required
                    url: ret.data.url
                };
            },
            fileFn(payload) {
                const ret = await this.upload(payload); // the payload has the file(File) param from pmd
                return {
                    upload: true, // required
                    url: ret.data.url
                };
            }
        }
    }

    插槽 (slot)

    <template>
        <div>
            <pmd
                v-if="renderType === 0"
                v-model="form.content"
                :uploadImgFn="uploadFn"
                :uploadFileFn="uploadFn"
                :plugins="{mathjax: true}"
                :customLeftToolbar="false"
            >
    
    
                <template slot="toolbarLeftBefore"><span><i class="iconfont icon-clean"></i></span></template>
                <template slot="toolbarLeftAfter"><span><i class="iconfont icon-clean"></i></span></template>
                <template slot="toolbarRightBefore"><span><i class="iconfont icon-clean"></i></span></template>
                <template slot="toolbarRightAfter"><span><i class="iconfont icon-clean"></i></span></template>
            </pmd>
        <div>
    <template>

    vuex模块api (vuex module api)

    <template>
        <div>
            <pmd>
            </pmd>
        </div
    </template>
    import { mapActions, mapGetters } from 'vuex';
    export default {
        computed: {
            ...mapGetters({
                editorIsSplit: 'markdownBody/getEditorIsSplit',
                editorIsFullscrean: 'markdownBody/getEditorIsFullscrean',
                textareaContent: 'markdownBody/getTextareaContent'
            })
        },
        methods: {
            ...mapActions({ setTextareaContent: 'markdownBody/setTextareaContent' })
        }
    }

    翻译自: https://vuejsexamples.com/a-markdown-editor-based-on-vue-markdown-it/

    展开全文
  • 前言 在此系列文章的第一篇,我们...今天,我们就来看看 Vuepress 是如何利用 markdown-it 来解析 markdown 代码的。 markdown-it 简介 markdown-it 是一个辅助解析 markdown 的库,可以完成从 # test 到 &lt;h...

    前言

    在此系列文章的第一篇,我们介绍了 Vuepress 如何让 Markdown 支持 Vue 组件的,但没有提到非 Vue 组件的其他部分如何被解析。

    今天,我们就来看看 Vuepress 是如何利用 markdown-it 来解析 markdown 代码的。

    markdown-it 简介

    markdown-it 是一个辅助解析 markdown 的库,可以完成从 # test<h1>test</h1> 的转换。

    它同时支持浏览器环境和 Node 环境,本质上和 babel 类似,不同之处在于,babel 解析的是 JavaScript。

    说到解析,markdown-it 官方给了一个在线示例,可以让我们直观地得到 markdown 经过解析后的结果。比如还是拿 # test 举例,会得到如下结果:

    [
      {
        "type": "heading_open",
        "tag": "h1",
        "attrs": null,
        "map": [
          0,
          1
        ],
        "nesting": 1,
        "level": 0,
        "children": null,
        "content": "",
        "markup": "#",
        "info": "",
        "meta": null,
        "block": true,
        "hidden": false
      },
      {
        "type": "inline",
        "tag": "",
        "attrs": null,
        "map": [
          0,
          1
        ],
        "nesting": 0,
        "level": 1,
        "children": [
          {
            "type": "text",
            "tag": "",
            "attrs": null,
            "map": null,
            "nesting": 0,
            "level": 0,
            "children": null,
            "content": "test",
            "markup": "",
            "info": "",
            "meta": null,
            "block": false,
            "hidden": false
          }
        ],
        "content": "test",
        "markup": "",
        "info": "",
        "meta": null,
        "block": true,
        "hidden": false
      },
      {
        "type": "heading_close",
        "tag": "h1",
        "attrs": null,
        "map": null,
        "nesting": -1,
        "level": 0,
        "children": null,
        "content": "",
        "markup": "#",
        "info": "",
        "meta": null,
        "block": true,
        "hidden": false
      }
    ]
    复制代码

    经过 tokenizes 后,我们得到了一个 tokens:

    我们也可以手动执行下面代码得到同样的结果:

    const md = new MarkdownIt()
    let tokens = md.parse('# test')
    console.log(tokens)
    复制代码

    主要 API 介绍

    模式

    markdown-it 提供了三种模式:commonmark、default、zero。分别对应最严格、GFM、最宽松的解析模式。

    解析

    markdown-it 的解析规则大体上分为块(block)和内联(inline)两种。具体可体现为 MarkdownIt.block 对应的是解析块规则的 ParserBlockMarkdownIt.inline 对应的是解析内联规则的 ParserInlineMarkdownIt.renderer.renderMarkdownIt.renderer.renderInline 分别对应按照块规则和内联规则生成 HTML 代码。

    规则

    MarkdownIt.renderer 中有一个特殊的属性:rules,它代表着对于 token 们的渲染规则,可以被使用者更新或扩展:

    var md = require('markdown-it')();
    
    md.renderer.rules.strong_open  = function () { return '<b>'; };
    md.renderer.rules.strong_close = function () { return '</b>'; };
    
    var result = md.renderInline(...);
    复制代码

    比如这段代码就更新了渲染 strong_open 和 strong_close 这两种 token 的规则。

    插件系统

    markdown-it 官方说过:

    We do a markdown parser. It should keep the "markdown spirit". Other things should be kept separate, in plugins, for example. We have no clear criteria, sorry. Probably, you will find CommonMark forum a useful read to understand us better.

    一言以蔽之,就是 markdown-it 只做纯粹的 markdown 解析,想要更多的功能你得自己写插件。

    所以,他们提供了一个 API:MarkdownIt.use

    它可以将指定的插件加载到当前的解析器实例中:

    var iterator = require('markdown-it-for-inline');
    var md = require('markdown-it')()
                .use(iterator, 'foo_replace', 'text', function (tokens, idx) {
                  tokens[idx].content = tokens[idx].content.replace(/foo/g, 'bar');
                });
    复制代码

    这段示例代码就将 markdown 代码中的 foo 全部替换成了 bar。

    更多信息

    可以访问我国庆期间翻译的中文文档,或者官方 API 文档

    vuepress 中的应用

    vuepress 借助了 markdown-it 的诸多社区插件,如高亮代码、代码块包裹、emoji 等,同时也自行编写了很多 markdown-it 插件,如识别 vue 组件、内外链区分渲染等。

    相关源码

    本文写自 2018 年国庆期间,对应 vuepress 代码版本为 v1.0.0-alpha.4。

    入口

    源码 主要做了下面五件事:

    1. 使用社区插件,如 emoji 识别、锚点、toc。
    2. 使用自定义插件,稍后详细说明。
    3. 使用 markdown-it-chain 支持链式调用 markdown-it,类似我在第二篇文章提到的 webpack-chain。
    4. 参数可以传 beforeInstantiate 和 afterInstantiate 这两个钩子,这样方便暴露 markdown-it 实例给外部。
    5. dataReturnable 自定义 render:
    module.exports.dataReturnable = function dataReturnable (md) {
      // override render to allow custom plugins return data
      const render = md.render
      md.render = (...args) => {
        md.__data = {}
        const html = render.call(md, ...args)
        return {
          html,
          data: md.__data
        }
      }
    }
    复制代码

    相当于让 __data 作为一个全局变量了,存储各个插件要用到的数据。

    识别 vue 组件

    源码

    就做了一件事:替换默认的 htmlBlock 规则,这样就可以在根级别使用自定义的 vue 组件了。

    module.exports = md => {
      md.block.ruler.at('html_block', htmlBlock)
    }
    复制代码

    这个 htmlBlock 函数和原生的 markdown-it 的 html_block 关键区别在哪呢?

    答案是在 HTML_SEQUENCES 这个正则数组里添加了两个元素:

    // PascalCase Components
    [/^<[A-Z]/, />/, true],
    // custom elements with hyphens
    [/^<\w+\-/, />/, true],
    复制代码

    很明显,这就是用来匹配帕斯卡写法(如 <Button/>)和连字符(如 <button-1/>)写法的组件的。

    内容块

    源码

    这个组件实际上是借助了社区的 markdown-it-container 插件,在此基础上定义了 tip、warning、danger、v-pre 这四种内容块的 render 函数:

    render (tokens, idx) {
      const token = tokens[idx]
      const info = token.info.trim().slice(klass.length).trim()
      if (token.nesting === 1) {
        return `<div class="${klass} custom-block"><p class="custom-block-title">${info || defaultTitle}</p>\n`
      } else {
        return `</div>\n`
      }
    }
    复制代码

    这里需要说明一下的是 token 的两个属性。

    1. info 三个反引号后面跟的那个字符串。

    2. nesting 属性:

    • 1 意味着标签打开。
    • 0 意味着标签是自动关闭的。
    • -1 意味着标签正在关闭。

    高亮代码

    源码

    1. 借助了 prismjs 这个库
    2. 将 vue 和 html 看做是同一种语言:
    if (lang === 'vue' || lang === 'html') {
    	lang = 'markup'
    }
    复制代码
    1. 对语言缩写做了兼容,如 md、ts、py
    2. 使用 wrap 函数对生成的高亮代码再做一层包装:
    function wrap (code, lang) {
      if (lang === 'text') {
        code = escapeHtml(code)
      }
      return `<pre v-pre class="language-${lang}"><code>${code}</code></pre>`
    }
    复制代码

    高亮代码行

    源码

    1. 别人的代码基础上修改的。
    2. 重写了 md.renderer.rules.fence 方法,关键是借助一个正则判断获取要高亮的代码行们:
    const RE = /{([\d,-]+)}/
    
    const lineNumbers = RE.exec(rawInfo)[1]
          .split(',')
          .map(v => v.split('-').map(v => parseInt(v, 10)))
    复制代码

    然后条件渲染:

    if (inRange) {
       return `<div class="highlighted">&nbsp;</div>`
    }
    return '<br>'
    复制代码

    最后返回高亮行代码 + 普通代码。

    脚本提升

    源码

    重写 md.renderer.rules.html_block 规则:

    const RE = /^<(script|style)(?=(\s|>|$))/i
    
    md.renderer.rules.html_block = (tokens, idx) => {
    	const content = tokens[idx].content
    	const hoistedTags = md.__data.hoistedTags || (md.__data.hoistedTags = [])
    	if (RE.test(content.trim())) {
    	  hoistedTags.push(content)
    	  return ''
    	} else {
    	  return content
    	}
    }
    复制代码

    将 style 和 script 标签保存在 __data 这个伪全局变量里。这部分数据会在 markdownLoader 中用到。

    行号

    源码

    重写 md.renderer.rules.fence 规则,通过换行符的数量来推算代码行数,并再包裹一层:

    const lines = code.split('\n')
    const lineNumbersCode = [...Array(lines.length - 1)]
      .map((line, index) => `<span class="line-number">${index + 1}</span><br>`).join('')
    
    const lineNumbersWrapperCode =
      `<div class="line-numbers-wrapper">${lineNumbersCode}</div>`
    复制代码

    最后再得到最终代码:

    const finalCode = rawCode
      .replace('<!--beforeend-->', `${lineNumbersWrapperCode}<!--beforeend-->`)
      .replace('extra-class', 'line-numbers-mode')
    
    return finalCode
    复制代码

    内外链区分

    源码

    一个 a 链接,可能是跳往站内的,也有可能是跳往站外的。vuepress 将这两种链接做了一个区分,最终外链会比内链多渲染出一个图标:

    要实现这点,vuepress 重写了 md.renderer.rules.link_open 和 md.renderer.rules.link_close 这两个规则。

    先看 md.renderer.rules.link_open :

    if (isExternal) {
    	Object.entries(externalAttrs).forEach(([key, val]) => {
    	  token.attrSet(key, val)
    	})
    	if (/_blank/i.test(externalAttrs['target'])) {
    	  hasOpenExternalLink = true
    	}
    } else if (isSourceLink) {
    	hasOpenRouterLink = true
    	tokens[idx] = toRouterLink(token, link)
    }
    复制代码

    isExternal 便是外链的标志位,这时如果它为真,则直接设置 token 的属性即可,如果 isSourceLink 为真,则代表传入了个内链,整个 token 将会被替换成 toRouterLink(token, link) :

    function toRouterLink (token, link) {
    	link[0] = 'to'
    	let to = link[1]
    
    	// convert link to filename and export it for existence check
    	const links = md.__data.links || (md.__data.links = [])
    	links.push(to)
    
    	const indexMatch = to.match(indexRE)
    	if (indexMatch) {
    	  const [, path, , hash] = indexMatch
    	  to = path + hash
    	} else {
    	  to = to
    	    .replace(/\.md$/, '.html')
    	    .replace(/\.md(#.*)$/, '.html$1')
    	}
    
    	// relative path usage.
    	if (!to.startsWith('/')) {
    	  to = ensureBeginningDotSlash(to)
    	}
    
    	// markdown-it encodes the uri
    	link[1] = decodeURI(to)
    
    	// export the router links for testing
    	const routerLinks = md.__data.routerLinks || (md.__data.routerLinks = [])
    	routerLinks.push(to)
    
    	return Object.assign({}, token, {
    	  tag: 'router-link'
    	})
    }
    复制代码

    先是 href 被替换成 to,然后 to 又被替换成 .html 结尾的有效链接。

    再来看 md.renderer.rules.link_close :

    if (hasOpenRouterLink) {
      token.tag = 'router-link'
      hasOpenRouterLink = false
    }
    if (hasOpenExternalLink) {
      hasOpenExternalLink = false
      // add OutBoundLink to the beforeend of this link if it opens in _blank.
      return '<OutboundLink/>' + self.renderToken(tokens, idx, options)
    }
    return self.renderToken(tokens, idx, options)
    复制代码

    很明显,内链渲染 router-link 标签,外链渲染 OutboundLink 标签,也就是加了那个小图标的链接组件。

    代码块包裹

    源码

    这个插件重写了 md.renderer.rules.fence 方法,用来对 <pre> 标签再做一次包裹:

    md.renderer.rules.fence = (...args) => {
    	const [tokens, idx] = args
    	const token = tokens[idx]
    	const rawCode = fence(...args)
    	return `<!--beforebegin--><div class="language-${token.info.trim()} extra-class">` +
    	`<!--afterbegin-->${rawCode}<!--beforeend--></div><!--afterend-->`
    }
    复制代码

    将围栏代码拆成四个部分:beforebegin、afterbegin、beforeend、afterend。相当于给用户再自定义 markdown-it 插件提供了钩子。

    锚点非 ascii 字符处理

    源码

    这段代码最初是为了解决锚点中带中文或特殊字符无法正确跳转的问题。

    处理的非 acsii 字符依次是:变音符号 -> C0控制符 -> 特殊字符 -> 连续出现2次以上的短杠(-) -> 用作开头或结尾的短杆。

    最后将开头的数字加上下划线,全部转为小写。

    代码片段引入

    源码

    它在 md.block.ruler.fence 之前加入了个 snippet 规则,用作解析 <<< @/filepath 这样的代码:

    const start = pos + 3
    const end = state.skipSpacesBack(max, pos)
    const rawPath = state.src.slice(start, end).trim().replace(/^@/, root)
    const filename = rawPath.split(/[{:\s]/).shift()
    const content = fs.existsSync(filename) ? fs.readFileSync(filename).toString() : 'Not found: ' + filename
    复制代码

    它会把其中的文件路径拿出来和 root 路径拼起来,然后读取其中文件内容。因为还可以解析 <<< @/test/markdown/fragments/snippet.js{2} 这样附带行高亮的代码片段,所以需要用 split 截取真正的文件名。

    结语

    markdown 作为一门解释型语言,可以帮助人们更好地描述一件事物。同时,它又作为通往 HTML 的桥梁,最终可以生成美观简约的页面。

    而 markdown-it 提供的解析器、渲染器以及插件系统,更是让开发者可以根据自己的想象力赋予 markdown 更多的魅力。

    展开全文
  • 页面引用vue-markdown组件时可能会报下这个错,解决办法:安装1.1.1版本的...这是因为安装vue-markdown依赖包时,会同时安装markdown-itmarkdown-it的引用entities.json的路径和entities依赖包中的路径不一致 ...
  • 前言 在此系列文章的第一篇,我们介绍了 Vuepress 如何让 Markdown 支持 Vue 组件的,但没有提到非...今天,我们就来看看 Vuepress 是如何利用 markdown-it 来解析 markdown 代码的。 markdown-it 简介 markdown...
  • 一个Vue.js组件,用于使用Vuetify.js和markdown-it编辑和预览markdown。 安装 npm install vuetify-markdown-editor 由于此组件基于Vuetify,因此需要安装和配置Vuetify。 要安装Vuetify,请访问 。 产品特点 ...
  • markdown-it-prism'); { test: /\.md$/, loader: 'frontmatter-markdown-loader', options: { mode: [Mode.VUE_COMPONENT], markdownIt: markdownIt({ html: true }) } </code></pre> <p>or with...
  • <div><p><img alt="2019-05-18 20-57-28屏幕截图" src="https://img-blog.csdnimg.cn/img_convert/d7cce00d5a28ef791218031325a34536.png" /> <img alt="2019-05-18 20-...vuepress-reco/vuepress-theme-reco</p></div>
  • 想把自己写的Vue学习笔记挂到自己用heroku搭的小网站上去,已经在npm上搜到GitHub风格的插件,配合markdown-it可以做到GitHub的markdown风格显示效果,但是昨天发现代码没有高亮,想做好代码高亮效果 解决过程 首先...
  • 但是怎么渲染成vue 组件呢? <p><img alt="image" src="https://img-blog.csdnimg.cn/img_convert/dda283ea41210f326231ae4607e017c2.png" /></p><p>该提问来源于开源项目:hinesboy/mavonEditor</p></...
  • Desktop: electron-vue-admin Typescript: vue-typescript-admin-template (Credits: @Armour) awesome-project After the v4.1.0+ version, the default master branch will not support i18n. Please use ...
  • Markdown-based Galaxy Pages.

    2020-12-04 20:01:15
    external IDs, Vue components, etc..) setup in #8543 to implement Markdown based pages. <ul><li>Page revisions now have a content type - can be HTML (old style) or newer Markdown. New API tests to ...
  • electron-vue also officially recommends the yarn package manager as it handles dependencies much better and can help reduce final build size with yarn clean. # Install vue-cli and scaffold ...
  • <ol><li>Paste below code in markdown file and set syntax as vue(I am unable to nest code snippets).</li><li>Save (which will format the file and will remove the blank line above comment)</li></ol> ...
  • <p>So last night I tried swapping out <em>vue-markdown</em> with <em>vue-marked</em> as a mixin and those files are 10x lighter. <p>Is there some crucial functionality you want to keep from vue-...
  • ps:这个插件是基于markdown-it的,不需要单独安装markdown-it。 2、修改vue.config.js配置文件(如果没有,在项目根目录新建一个): module.exports = { chainWebpack: config => { config.module.rule('md') ...
  • Vue中使用markdown的方式markdown-loader是 markdown文件加载为html文件,然后由html-loader加载该htmlmarkdown-it-vue 是markdown-it的扩展,用于vue中展示markdown// 安装依赖$ npm i markdown-loader ...
  • vue markdown 降价促销 (markdown-it-vue) The vue lib for markdown-it. markdown-it的Vue库。 View Demo 查看演示 View Github 查看Github 安装 (Install) npm install markdown-it-vue 支持 (Supports) ...
  • 这个npm软件包是一个命令行脚本,它扫描您JavaScript,Vue或Typescript源代码,并借助和为vuepress生成markdown文件。 如何 yarn global add vuepress-jsdoc npm i vuepress-jsdoc -g 例: # search code in src ...
  • vue markdown_Vue的强大Markdown组件

    千次阅读 2020-07-27 06:38:24
    vue markdown 降价促销 (markdown-it-vue) The vue lib for markdown-it. markdown-it的Vue库。 View Demo 查看演示 Download Source 下载源 安装 (Install) npm install markdown-it-vue 支持 (Supports) ...
  • <div><p>When i attach a class to the <code>vue-markdown</code> component it is not being styled accordingly. <p>Example: <pre><code> <template lang="pug"> vue-markdown(:source=...
  • markdown-it-vue/dist/markdown-it-vue.css'; export default { components: { MarkdownItVue }, name: 'HelloWorld', props: { msg: String }, data:function () { return { options: { ...
  • 一个可以自定义编辑和渲染的Vue-Markdown组件, 基于simplemde Github: github.com/yansenlei/v… Demo: jsfiddle.net/leiys/s2jw8… 安装 $ npm i vue-freemde -S 复制代码使用 Import globally import Vue from '...
  • npm install -D markdown-it markdown-it-anchor markdown-it-chain markdown-it-container, transliteration 使用highlight.js高亮代码 npm install -D highlight.js 清除 aurora-ui/examples下无用的目录和文....

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 304
精华内容 121
关键字:

markdown-it-vue

vue 订阅