精华内容
下载资源
问答
  • markdown-it的Vue库。 在线演示 安装 npm install markdown-it-vue 支持 图像大小和查看器 官方降价语法。 GFM目录 GFM风格 表情符号 仅简单 Flowcharts.js 下标/上标 信息| 错误警告信息提示 插件清单 降价 ...
  • 降价递增 使用渲染器插件。 让我们看看主要功能: : 或 需求 ...import MarkdownItIncrementalDOM from 'markdown-it-incremental-dom' const md = new MarkdownIt ( ) . use ( MarkdownItIncrementa
  • 一个基于markdown-it高度可扩展的vue编辑器组件 允许提供插槽自定义工具栏 允许通过动态注册组件,允许插入工具栏指定位置 优势:可完全自定义工具栏功能,markdown-it插件调用等 安装 $ npm install vue-bl-...
  • Markdown-it-latex2img 用于 Markdown解析器的LaTex插件,服务器端MathJax Renderer。 背景 有关 markdown-it-math:最初旨在渲染MathML。 markdown-it-mathjax:只是为了绕过LaTeX数学进行mathjax处理,需要导入 ...
  • 用于markdown-it markdown解析器的MultiMarkdown表语法插件 介绍 Markdown规范仅定义表的基础。 当用户需要像colspan这样的通用功能时,他们必须回退到原始HTML。 用HTML编写表格确实冗长且麻烦。 该插件使用...
  • const md = require ( 'markdown-it' ) ( ) ; const prism = require ( 'markdown-it-prism' ) ; md . use ( prism , options ) ; 该插件会将必要的标记插入所有代码块中。 在HTML中以获取突出显示的代码。 选件 ...
  • 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-lazy-headersMarkdown it Lazy Headers,Lazy ATX Headers插件用于Markdown it
  • 前端开源库-markdown-it-checkboxmarkdown it复选框,插件为markdown it markdown解析器创建复选框
  • 前端开源库-markdown-it-expand-tabsmarkdown it expand tabs,一个markdown it插件,用于用代码块中的空格替换前导制表符。
  • 前端项目-markdown-it-footnote,markdown it markdown解析器的脚注。
  • 前端开源库-markdown-it-include它包括了markdown,markdown it插件,它添加了包括markdown片段文件的功能。
  • 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

    展开全文
  • 前端项目-markdown-it-emoji,用于Markdown it Markdown Parser的emoji插件。
  • 前端开源库-markdown-it-math标记IT Math,标记IT插件以在文档中包含Math
  • 前端开源库-markdown-it-highlight-lines标记它突出显示行,突出显示代码块中的特定行。
  • 前端开源库-markdown-it-highlightjs标记为HighlightJS,预设为使用Highlight.JS和Markdown。
  • 前端开源库-markdown-it-for-inline标记它作为内联,内联标记迭代器作为标记它的标记解析器。
  • 前端开源库-markdown-it-prism标记它prism,使用prism在标记它时突出显示代码块。
  • It would be nice to have support for markdown-it containers via the https://github.com/markdown-it/markdown-it-container plugin. Any chance that you add support for this?</p><p>该提问来源于开源项目&#...
  • markdown-it-mermaid' mounted() { const mdi = this.$refs.md.markdownIt mdi.use(markdownItMermaid) }, </code></pre> <p><a href=...
  • 前端项目-markdown-it.zip

    2019-09-02 21:28:04
    前端项目-markdown-it,Markdown it-现代可插拔Markdown解析器。
  • Laravel开发-laravel-markdown-it 在Laravel5.x中使用PHP版本的一件事就是将它标记下来。
  • markdown编辑器markdown-it.zip
  • markdown-it-container, 用于 Markdown Markdown 解析器的Fenced容器插件 markdown-it-container 用于创建简化的块级定制容器的插件( ) 。v2. 需要 markdown-it v5. ,请参阅日志记录。 使用这里插件,你可以创建块...
  • <div><p>Illustrates a solution to #75 <p>/markdown-it-task-lists: https://github.com/revin/markdown-it-task-lists</p><p>该提问来源于开源项目:executablebooks/markdown-it-py</p></div>
  • <div><p>See issue #47</p><p>该提问来源于开源项目:atom-community/markdown-preview-plus</p></div>
  • markdown-it-katex, 向 Markdown 添加数学,使用KaTeX插件进行 Markdown markdown-it-katex将数学添加到 Markdown KaTeX 比MathJax更快速。 这个插件很容易在你的Markdown 中支持。需要有说服力?查看比较基准: ...
  • - <a href="https://github.com/markdown-it/markdown-it-emoji/commit/1625425a5fba0a5bc13f369e38976beeee221a72"><code>1625425</code></a> <code>Fix upgrader: ignore variation chars in light data filter ...
  • support for markdown-it

    2020-12-02 06:44:07
    <div><p>Typings URL: [https://github.com/rapropos/typed-markdown-it] Source URL: [https://github.com/markdown-it/markdown-it]</p><p>该提问来源于开源项目:typings/registry</p></div>

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,121
精华内容 6,048
关键字:

markdown-it