第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

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

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

翻閱古今 2023-05-11 13:21:41
在當(dāng)前示例中，Markdown 片段被移植到 HTML，輸出顯示在 DIV（ID 內(nèi)容）中。突出顯示功能 (hljs.highlight) 設(shè)置為選項(xiàng) markdown-it (md)。然而，這沒(méi)有被執(zhí)行。我必須更改什么才能使輸出使用 highlight.js？<!DOCTYPE html><html><head>    <meta charset="utf-8"/>    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.1/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貢獻(xiàn)1841條經(jīng)驗(yàn) 獲得超3個(gè)贊

希望還不算太晚。

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

所以這：

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

應(yīng)該：

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

一切都應(yīng)該是這樣的：

.js 文件應(yīng)該是：


<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>

這些都可以。


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


npm install markdown-it-highlight


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


然后你必須設(shè)置這個(gè)defaults對(duì)象并將其設(shè)置在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;


查看完整回答
反對(duì) 回復(fù) 2023-05-11
?
智慧大石

TA貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超3個(gè)贊

概括：

簡(jiǎn)單的方法

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

import MarkdownIt from 'markdown-it'


// For Markdown in Adaptive Cards.

window.markdownit = MarkdownIt

現(xiàn)在我們將使用另一個(gè)庫(kù)來(lái)為代碼著色：


import highlight from 'highlight.js'

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

跑步：


highlight.highlightAll()

更新所有卡片。


如果你運(yùn)行它兩次，那么它會(huì)嘗試更新它已經(jīng)更新的卡片，你會(huì)收到警告。

查看完整回答
反對(duì) 回復(fù) 2023-05-11
  • 2 回答
  • 0 關(guān)注
  • 1004 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)