ravenq / Markdown It Vue
Licence: mit
The vue lib for markdown-it.
Stars: ✭ 219
Projects that are alternatives of or similar to Markdown It Vue
Textformatter
Text formatting library that supports BBCode, HTML and other markup via plugins. Handles emoticons, censors words, automatically embeds media and more.
Stars: ✭ 188 (-14.16%)
Mutual labels: markdown, emoji
Emoji Cheat Sheet
A markdown version emoji cheat sheet
Stars: ✭ 5,957 (+2620.09%)
Mutual labels: markdown, emoji
Ngx Markdown
Angular markdown component/directive/pipe/service to parse static, dynamic or remote content to HTML with syntax highlight
Stars: ✭ 687 (+213.7%)
Mutual labels: markdown, emoji
Electron Markdownify
📕 A minimal Markdown editor desktop app
Stars: ✭ 700 (+219.63%)
Mutual labels: markdown, emoji
Rich
Rich is a Python library for rich text and beautiful formatting in the terminal.
Stars: ✭ 31,664 (+14358.45%)
Mutual labels: markdown, emoji
Marktext
📝A simple and elegant markdown editor, available for Linux, macOS and Windows.
Stars: ✭ 22,894 (+10353.88%)
Mutual labels: markdown, emoji
Laravel Smartmd
🎯 A simple markdown editor compatible most markdown parse,You can choose any parse methods on server or client,like Mathematical formula、flowchart、upload image...
Stars: ✭ 76 (-65.3%)
Mutual labels: markdown, emoji
Jekyll Spaceship
🚀 A Jekyll plugin to provide powerful supports for table, mathjax, plantuml, mermaid, emoji, video, audio, youtube, vimeo, dailymotion, soundcloud, spotify, etc.
Stars: ✭ 196 (-10.5%)
Mutual labels: markdown, emoji
Vuepress Theme Resume
🐈 书写简洁优雅的前端程序员 markdown 简历,由 vuepress 驱动
Stars: ✭ 211 (-3.65%)
Mutual labels: markdown
React Markdown Editor
A markdown editor using React/Reflux
Stars: ✭ 209 (-4.57%)
Mutual labels: markdown
Pandoc Book Template
A simple Pandoc template to build documents and ebooks.
Stars: ✭ 214 (-2.28%)
Mutual labels: markdown
Marp
The entrance repository of Markdown presentation ecosystem
Stars: ✭ 3,378 (+1442.47%)
Mutual labels: markdown
Scroll
Static publishing software with a newspaper feel built on Tree Notation. Scroll is public domain software.
Stars: ✭ 206 (-5.94%)
Mutual labels: markdown
Markdig
A fast, powerful, CommonMark compliant, extensible Markdown processor for .NET
Stars: ✭ 2,730 (+1146.58%)
Mutual labels: markdown
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 style
- emoji
- mermaid charts
- Echarts simple only
- Flowcharts.js
- Subscript/Superscript
- AsciiMath
- info | error | warning message tip
Plugin list
- 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
internal plugin list:
- markdown-it-image
- markdown-it-font-awsome
- markdown-it-link-attributes
- markdown-it-highlight
- markdown-it-plugin-echarts
- markdown-it-plugin-mermaid
- markdown-it-plugin-flowchart
Options
use options
property to sepcial the options of markdow-it and markdown-it-plugins.
<markdown-it-vue class="md-body" :content="content" :options="options" />
options: {
markdownIt: {
linkify: true
},
linkAttributes: {
attrs: {
target: '_blank',
rel: 'noopener'
}
}
}
more markdown-it options see https://markdown-it.github.io/markdown-it/.
amd default plugins options:
{
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
}
}
More plugins
it can add your plugin to markdown-it-vue by the use
method.
this.$refs.myMarkdownItVue.use(MyMarkdownItPlugin)
support hilight lang
PR for you lang wich you want.
- 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
image size
![image size](https://http://www.aqcoder.com/ravenq-qr.png =50x50)
![image size](https://http://www.aqcoder.com/ravenq-qr.png =x50)
![image size](https://http://www.aqcoder.com/ravenq-qr.png =50x)
about echarts
use echarts.simple to reduce the bundle size.
markdown-it-vue-light
markdown-it-vue-light remove the mermaid chart to reduce the bundle size.
https://github.com/ravenq/markdown-it-vue/issues/24
for a small bundle size, it better to import the markdown-it-vue-light.
Usage
<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>
the light model.
<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.umd.min.js'
import 'markdown-it-vue/dist/markdown-it-vue-light.css'
export default {
components: {
MarkdownItVueLight
},
data() {
return {
content: '# your markdown content'
}
}
}
</script>
ScreenShot
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].