Может ли кто-нибудь объяснить, что я делаю неправильно, пытаясь создать подсветку синтаксиса для моего сайта? - PullRequest
Новая
       36

Может ли кто-нибудь объяснить, что я делаю неправильно, пытаясь создать подсветку синтаксиса для моего сайта?

0 голосов
/ 22 октября 2019

Я очень стараюсь добавить подсветку синтаксиса для моего личного веб-сайта, к которому я обращаюсь за концепциями, которые я выучил.

Сначала для записи своих заметок я использовал Markdown, поскольку это было довольнолегко делать заметки. Но, изучая все больше и больше, я понял, что хочу гораздо больше вещей, на которые способен Markdown, и понял, что хочу создать свой веб-сайт.

По сути, я использовал pandoc для конвертации своегодействительно большой .md файл в .html, и я думаю, что я более или менее остался в беспорядке. Конечно, CSS не было, и какое-то время я действительно огляделся, чтобы понять, как заставить HTML выглядеть великолепно. Я подумал, что начну с подсветки синтаксиса для моих фрагментов кода, которые были преобразованы во что-то вроде: 

<p>Hello World in C</p>
<pre><code class="lang-c"><span class="hljs-meta">#<span class="hljs-meta-keyword">include</span> <span class="hljs-meta-string">&lt;stdio.h&gt;</span></span>
<span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span> <span class="hljs-params">()</span> </span>{
    <span class="hljs-built_in">printf</span>(<span class="hljs-string">"Hello World!\n"</span>);
    <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
}

, так что, по крайней мере, Пандок понял, что я пишу код в уценке, так как мыиметь <code class="lang-c"> (хотя все еще выглядит очень некрасиво, я не знаю половину того, что происходит).

Затем я наткнулся на этот блог: https://www.taniarascia.com/adding-syntax-highlighting-to-code-snippets/ и следовал некоторым инструкциям:делаем следующее: 

<head>
    <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/themes/prism.min.css"
    />
    <link rel = "stylesheet"
    type = "text/css"
    href = "new.css" />
</head>

, где new.css: https://github.com/taniarascia/new-moon/blob/master/docs/css/main.css

Но теперь все кажется запутанным и не красивым. Наиболее очевидно, что мой код вообще не выделен синтаксисом: enter image description here

Что я могу сделать, чтобы сделать мой сайт красивым? Честно говоря, я несколько слепо следую советам, которые я нахожу в Интернете, что, вероятно, не самый продуктивный, но я не знаю, где еще можно научиться этому.

PS. Я использую Vim, если это уместно.

Редактировать: Да, у меня есть также файлы js из призмы прямо перед концом тела: <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/prism.min.js"></script>.

Редактировать 2: Вот минимальныйпример, если вы хотите попытаться воссоздать проблему (помните, что new.css я скачал с https://github.com/taniarascia/new-moon/blob/master/docs/css/main.css)

<!DOCTYPE html>
<html>

    <head>
        <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/themes/prism.min.css"
        />
        <link rel = "stylesheet"
        type = "text/css"
        href = "new.css" />
    </head>

    <body>
        <h1 id="hello-world">Hello World</h1>
        <p>Hello World in C</p>
        <pre><code class="lang-c"><span class="hljs-meta">#<span class="hljs-meta-keyword">include</span> <span class="hljs-meta-string">&lt;stdio.h&gt;</span></span>

<span class="hljs-function"><span class="hljs-keyword">int</span> <span class="hljs-title">main</span> <span class="hljs-params">()</span> </span>{
    <span class="hljs-built_in">printf</span>(<span class="hljs-string">"Hello World!\n"</span>);
    <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>;
}

1 Ответ

0 голосов
/ 22 октября 2019

Проблема с вашим фрагментом в том, что HTML уже соответствует, и синтаксис имеет значение hightlight.js, а не prism.js. Позвольте PrismJS скомпилировать ваш фрагмент кода, а не преобразовывать его во время файла .md в файл .html.

Например: синтаксис hljs-function используется в hightlightjs, а не в prismjs. 

code[class*="language-"] > script {
  display: block !important;
}
<!-- Prism theme -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.4/themes/prism.min.css">
<!-- Prism main -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.4/prism.min.js"></script>
<!-- Prism languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.8.4/components/prism-c.min.js"></script>

<pre class="language-c">
<code>
<script type="text/plain">
#include <stdio.h>
int main () {
    printf("Hello World!\n");
    return 0;
}
</script>
...