ホームページ > 記事 > ウェブフロントエンド > Vue3 がマークダウンを解析し、コードのハイライトを実装する方法
Vue はブログ フロントエンドを実装しており、マークダウン解析を実装する必要があります。コードがある場合は、コードのハイライトを実装する必要があります。
Vue には、markdown-it、vue-markdown-loader、marked、vue-markdown など、多くのマークダウン解析ライブラリがあります。これらのライブラリはすべて非常に似ています。ここではMarkedが使用され、コード強調表示ライブラリとしてhighlight.jsが使用されます。
vue プロジェクトの下でコマンド ウィンドウを開き、次のコマンドを入力します
npm install marked -save // marked 用于将markdown转换成html npm install highlight.js -save //用于代码高亮显示
コマンドが実行されます。コンソールまたは package.json ファイルで、インストールされているバージョン番号を確認できます。
import hljs from 'highlight.js'; import 'highlight.js/styles/atom-one-dark.css' //样式 //创建v-highlight全局指令 Vue.directive('highlight',function (el) { let blocks = el.querySelectorAll('pre code'); blocks.forEach((block)=>{ hljs.highlightBlock(block) }) })
これにより、v-highlight を使用して、vue コンポーネントのコード ハイライト メソッドを参照できます。
コード例は次のとおりです:
<!-- 正文输出 --> <div class="entry-content"> <div v-highlight v-html="article" id="content"></div> </div>
<script> // 将marked 引入 import { marked }from 'marked'; export default { name: 'articles', data(){ return{ article:'' } }, methods: { getPostDetail() { console.log('getPostDetail()'+this.id) fetchPostDetail(this.id).then(res => { this.postdetail=res.data // 调用marked()方法,将markdown转换成html this.article= marked(this.postdetail.content); console.log(res.data) }).catch(err => { console.log(err) }) }, created() { //调用获取文章内容的接口方法 this.getPostDetail() }, } </script>
マークダウン解析とコード強調表示効果
例で参照されているスタイルはimport 'highlight.js/styles/atom-one-dark.css'
実際、highlight.js/styles には多くのスタイルが用意されており、好みに応じて選択できます。
以上がVue3 がマークダウンを解析し、コードのハイライトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。