首頁猿問使用 Markdown-it.js...

使用 Markdown-it.js 和 Highlight.js 高亮代碼

JavaScript

翻閱古今 2023-05-11 13:21:41

在當前示例中，Markdown 片段被移植到 HTML，輸出顯示在 DIV（ID 內容）中。突出顯示功能 (hljs.highlight) 設置為選項 markdown-it (md)。然而，這沒有被執行。我必須更改什么才能使輸出使用 highlight.js？<!DOCTYPE html><html><head> <meta charset="utf-8"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/11.0.1/markdown-it.min.js "></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.1/highlight.min.js"></script></head><body> <div id="content"></div> <script> var md = window.markdownit(); md.set({ highlight: function (str, lang) { if (lang && hljs.getLanguage(lang)) { try { return '<pre class="hljs"><code>' + hljs.highlight(lang, str, true).value + '</code></pre>'; } catch (__) {} } return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>'; } }); var result = md.render('# markdown-it rulezz! \n\n```html <pre><code class="js">function test();</code></pre>```'); document.getElementById('content').innerHTML = result; </script> </body></html>

查看完整描述

2 回答

偶然的你

TA貢獻1841條經驗獲得超3個贊

希望還不算太晚。

您必須在您的圍欄代碼塊之后換行 ( \n) 。

所以這：

var result = md.render('# markdown-it rulezz! \n\n```html <pre><code class="js">function test();</code></pre>```');

應該：

var result = md.render('# markdown-it rulezz! \n\n ```html \n <pre><code class="js">function test();</code></pre>\n```');

一切都應該是這樣的：

.js 文件應該是：

這些都可以。

至于 .css，您可以使用您正在使用的那個，也可以使用 npm 中的那個：

npm install markdown-it-highlight

在獲取 .css 文件node_modules/markdown-it-highlight/dist/index.css，它具有更好的語法高亮顏色并使用它。

然后你必須設置這個defaults對象并將其設置在defaults.highlight：

var defaults = {

html: false, // Enable HTML tags in source

xhtmlOut: false, // Use '/' to close single tags (<br />)

breaks: false, // Convert '\n' in paragraphs into <br>

langPrefix: 'language-', // CSS language prefix for fenced blocks

linkify: true, // autoconvert URL-like texts to links

typographer: true, // Enable smartypants and other sweet transforms

// options below are for demo only

_highlight: true, // <= THIS IS WHAT YOU NEED

_strict: false,

_view: 'html' // html / src / debug

};

// and then do this:

defaults.highlight = function (str, lang) {

var esc = md.utils.escapeHtml;

console.log(str)

console.log(lang)

if (lang && hljs.getLanguage(lang)) {

try {

return '<pre class="hljs"><code>' +

hljs.highlight(lang, str, true).value +

'</code></pre>';

} catch (__) {}

}else{

return '<pre class="hljs"><code>' + esc(str) + '</code></pre>';

}

};

// now set the md:

md = window.markdownit(defaults);

// now this is where you forgot the line break after the fenced code block:

const result = md.render('# markdown-it rulezz! \n ```html \n <pre><code class="js">function test();</code></pre>\n```');

document.querySelector('#content').innerHTML = result;

反對回復 2023-05-11

智慧大石

TA貢獻1946條經驗獲得超3個贊

概括：

簡單的方法

首先，確保你在卡片中支持 Markdown：

import MarkdownIt from 'markdown-it'

// For Markdown in Adaptive Cards.

window.markdownit = MarkdownIt

現在我們將使用另一個庫來為代碼著色：

import highlight from 'highlight.js'

import 'highlight.js/styles/github.css'

跑步：

highlight.highlightAll()

更新所有卡片。

如果你運行它兩次，那么它會嘗試更新它已經更新的卡片，你會收到警告。

反對回復 2023-05-11

2 回答
0 關注
941 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用 Markdown-it.js 和 Highlight.js 高亮代碼

使用 Markdown-it.js 和 Highlight.js 高亮代碼

2 回答

一切都應該是這樣的：

簡單的方法

添加回答