vue-markdown

將Mardown語法轉成HTML的套件。

Github

miaolz123/vue-markdown

範例

使用上相當簡單，只需加入Vue.use(VueMarkdown)，在HTML裡將Markdown的文字以<vue-markdown></vue-markdown>包起來即可。

JS

Vue.use(VueMarkdown);

var app = new Vue({
    el: "#app"
})

HTML

<vue-markdown>## Demo</vue-markdown>
<vue-markdown>[A link to Google](https://googl.com)</vue-markdown>

或

<vue-markdown>
## Demo
[A link to Google](https://googl.com)
</vue-markdown>

結果如下圖：

也支援各種Props；

linkify

例如以下關閉linkify後，將顯示純文字而非超連結。

<vue-markdown :linkify="false">www.google.com</vue-markdown> 

source and anchor-attributes

<vue-markdown :source="now"></vue-markdown>
<vue-markdown :anchor-attributes="linkAttrs">[A link to Google](https://google.com)</vue-markdown>

Vue.use(VueMarkdown);

var app = new Vue({
    el: "#app",
    data:{
        now: new Date().toLocaleTimeString(),
        linkAttrs: {
            target: '_blank',
            id: 'mylink'
          } 
    },
    created() {
        var vm =this;
    },
})

產生的HTML如下：

<div><p>下午11:39:21</p></div>
<div><p><a href="https://google.com" target="_blank" id="mylink">A link to Google</a></p></div>

emoji

<vue-markdown :emoji="true">:smiley::raising_hand::skull::heart_eyes_cat:</vue-markdown>

代碼表可參考Complete list of github markdown emoji markup

table-class

指定table的樣式名稱，例如使用bootstrap；

<vue-markdown table-class="table table-striped">
| Name | Lightsaber |
|:----:|:-------:|
| Anakin Skywalker | Blue |
| Darth Vader | Red |
| Mace Windu | Purple |
</vue-markdown>    

生成HTML：

<table class="table table-striped">
    <!-- skip -->
</table>