似乎highlight.js
将类应用于我的内容,而不是样式。我正在使用React
,TypeScript
和markdown-it
.
这是我对 package.json 的更改:
"dependencies": {
"highlight.js": "^9.12.0",
"devDependencies": {
"@types/highlight.js": "^9.12.3",
这是我的降价文件:
lua
for i = 1, iterations do
product.writeln("Starting iteration " .. tostring(i))
product.writeln("Will run for " .. tostring(duration) .. " msec")
project:start()
product.msleep(onoffdelay)
project:enable_main_power(true)
product.msleep(duration)
project:enable_main_power(false)
product.msleep(onoffdelay)
project:stop()
product.writeln("Delaying for " .. tostring(delay) .. " msec...")
product.msleep(delay)
end
这是我认为在 html 中呈现降价的 React 组件的相关部分。我不是很擅长 Typescript,所以我现在将参数的类型设置为字符串。我不知道在哪里可以找到 lang 的类型定义。
.then(data => {
const text = data as string;
const converted = text.replace(/!\[([^[\]]+)\]\(([^()]+)\)/g, `![$1](${resourceFolder}$2)`);
const hljs = require('highlight.js'); // https://highlightjs.org/
const md = require('markdown-it')({
html: true,
/* tslint:disable */
highlight: function (str: any, lang: any) {
if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(lang, str).value;
} catch (__) {}
}
return ''; // use external default escaping
}
/* tslint:enable */
});
const content = md.render(converted);
this.setState({
html: content
});
});
这是呈现的html:
<pre><code class="language-lua"><span class="hljs-keyword">for</span> i = <span class="hljs-number">1</span>, iterations <span class="hljs-keyword">do</span>
product.writeln(<span class="hljs-string">"Starting iteration "</span> .. <span class="hljs-built_in">tostring</span>(i))
product.writeln(<span class="hljs-string">"Will run for "</span> .. <span class="hljs-built_in">tostring</span>(duration) .. <span class="hljs-string">" msec"</span>)
project:start()
product.msleep(onoffdelay)
project:enable_main_power(<span class="hljs-literal">true</span>)
product.msleep(duration)
project:enable_main_power(<span class="hljs-literal">false</span>)
product.msleep(onoffdelay)
project:stop()
product.writeln(<span class="hljs-string">"Delaying for "</span> .. <span class="hljs-built_in">tostring</span>(delay) .. <span class="hljs-string">" msec..."</span>)
product.msleep(delay)
<span class="hljs-keyword">end</span>
</code></pre>
呈现的 html 看起来完全简单,没有语法突出显示。