Выделите JS применяет классы, но не стили - PullRequest
Новая
       18

Выделите JS применяет классы, но не стили

0 голосов
/ 17 сентября 2018

Кажется, что 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

Вот то, что я считаю соответствующей частью компонента React, который отображает уценку в html.Я не очень хорош в 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>

Визуализированный HTML выглядит совершенно простымбез подсветки синтаксиса.

...