Laravel 中是用 vue 解析 Markdown 並語法高亮

nfangxu發表於2019-06-13
LaravelVue

可以作為 laravel 使用 vue 的教程, 本文使用 vue-markdown 和 highlight.js

準備工作

安裝

# 安裝 vue-markdown
yarn add vue-markdown --save

# 安裝 highlight.js
yarn add highlight.js --save

使用

  • 在 resources/js/app.js, 這行程式碼以下 window.Vue = require('vue'); 新增
// 引入 vue-markdown 元件
Vue.component('vue-markdown', require('vue-markdown').default);

// 引入 highlight.js 元件及 GitHub 樣式
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'
Vue.directive('highlight', (el) => {
  let blocks = el.querySelectorAll('pre code')
  blocks.forEach((block) => {
    hljs.highlightBlock(block)
  })
})

生成可用的 js 和 css

  • 在專案根目錄執行
npm run prod
  • 你可能會遇到以下錯誤, 解決方案: 進入 ./node_modules/vue-markdown/ 目錄, 執行 yarn
ERROR in ./node_modules/vue-markdown/dist/vue-markdown.common.js
Module not found: Error: Can't resolve 'babel-runtime/core-js/get-iterator' in '/mnt/e/donews/project/laravel58/node_modules/vue-markdown/dist'
 @ ./node_modules/vue-markdown/dist/vue-markdown.common.js 9:27-72
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./node_modules/vue-markdown/dist/vue-markdown.common.js
Module not found: Error: Can't resolve 'babel-runtime/core-js/object/keys' in '/mnt/e/donews/project/laravel58/node_modules/vue-markdown/dist'
 @ ./node_modules/vue-markdown/dist/vue-markdown.common.js 9:74-118
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss

在頁面中使用

<!-- resources/views/home.blade.php -->

<!-- 其他內容 -->

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">Dashboard</div>
                <div class="card-body">
                    <vue-markdown v-highlight>i am a ~~tast~~ **test**.</vue-markdown>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<!-- 其他內容 -->
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章