markdown-it-vue

Библиотека Vue для markdown-it.

Онлайн демо

http://www.aqcoder.com/markdown

Установка

npm install markdown-it-vue

Запуск демонстрационного приложения

yarn install && yarn dev

Откройте http://localhost:8080/

Поддерживаемые возможности

• Размер изображений и просмотрщик
• Официальный синтаксис markdown
• Глобальная таблица содержаний (GFM TOC)
• Глобальные стили (GFM style)
• Эмодзи
• Графики mermaid
• ECharts в простейшем виде
• Диаграммы потока данных
• Нижний и верхний индекс
• AsciiMath
• Информационные сообщения типа "info", "ошибка", "предупреждение"

Список плагинов

• 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-highlight
• markdown-it-latex
• markdown-it-container
• markdown-it-github-toc
• markdown-it-source-map
• markdown-it-link-attributes

внутренние плагины:

• markdown-it-image
• markdown-it-font-awesome
• markdown-it-link-attributes
• markdown-it-highlight
• markdown-it-plugin-echarts
• markdown-it-plugin-mermaid
• markdown-it-plugin-flowchart

Настройки

Используйте свойство options, чтобы специализировать настройки для markdown-it и его плагинов.

<markdown-it-vue class="md-body" :content="content" :options="options" />

options: {
  markdownIt: {
    linkify: true
  },
  linkAttributes: {
    attrs: {
      target: '_blank',
      rel: 'noopener'
    }
  }
}

Дополнительные настройки markdown-it см. в https://markdown-it.github.io/markdown-it/.По умолчанию используются следующие опции для плагинов:

{
  linkAttributes: {
    attrs: {
      target: '_blank',
      rel: 'noopener'
    }
  },
  katex: {
    throwOnError: false,
    errorColor: '#cc0000'
  },
  icons: 'font-awesome',
  githubToc: {
    tocFirstLevel: 2,
    tocLastLevel: 3,
    tocClassName: 'toc',
    anchorLinkSymbol: '',
    anchorLinkSpace: false,
    anchorClassName: 'anchor',
    anchorLinkSymbolClassName: 'octicon octicon-link'
  },
  mermaid: {
    theme: 'default'
  },
  image: {
    hAlign: 'left',
    viewer: true
  }
}

Более плагинов

его можно использовать для добавления вашего плагина в markdown-it-vue методом use.

this.$refs.myMarkdownItVue.use(MyMarkdownItPlugin)

Поддержка выделения кода

Отправьте pull request для вашего языка программирования.

• html
• json
• css
• shell
• bash
• C
• Java
• Python
• C++
• C#
• PHP
• SQL
• R
• Swift
• Go
• MATLAB
• Ruby
• Perl
• Objective-C
• Rust
• Dart
• Delphi
• D
• Kotlin
• Scala
• SAS
• Lisp
• Lua
• Ada
• Fortran
• PowerShell
• VBScript
• VBscript-html
• Groovy
• Julia
• Julia-repl
• LabVIEW
• Haskell
• ActionScript
• Scheme
• TypeScript
• F#
• Prolog
• Erlang

Размер изображения

![размер изображения](https://http://www.aqcoder.com/ravenq-qr.png=50x50)
![размер изображения](https://http://www.aqcoder.com/ravenq-qr.png=x50)
![размер изображения](https://http://www.aqcoder.com/ravenq-qr.png=50x)

О echarts

используйте echarts.simple для сокращения размера пакета.

markdown-it-vue-light

markdown-it-vue-light удаляет диаграммы mermaid для сокращения размера пакета.

https://github.com/ravenq/markdown-it-vue/issues/24

для маленького размера пакета лучше импортировать markdown-it-vue-light.

Пример использования

<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: '# Ваш markdown контент'
    }
  }
}
</script>

Лёгкая версия.

<template>
  <div>
    <markdown-it-vue-light class="md-body" :content="content" />
  </div>
</template>

<script>
import MarkdownItVueLight from 'markdown-it-vue/dist/markdown-it-vue-light.um.min.js'
import 'markdown-it-vue/dist/markdown-it-vue-light.css'
export default {
  components: {
    MarkdownItVueLight
  },
  data() {
    return {
      content: '# Ваш markdown контент'
    }
  }
}
</script>

Скриншот

Лицензия

MIT