Search code examples
htmlcsshighlight.jsprismjs

Could someone explain what I am doing wrong in trying to create syntax highlighting for my website?

I'm trying really hard to add syntaxing highlighting for my personal website where I refer back to for concepts I have learnt.

At first, to record my notes, I used Markdown, since that was pretty easy to take notes in. But as I explored more and more I figured out I wanted many more things than Markdown was capable of, and realized I wanted to make my website.

Essentially, I used pandoc to convert my really big .md file to .html, and I think I was more or less left with a mess. There was no CSS of course, and for a while I really looked around to figure out how to make the html look great. I thought I would start with syntax highlighting for my code snippets which were converted to something like:

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

so at least it seemed that pandoc understood that I writing code in markdown since we have <code class="lang-c"> (It still looks really ugly though, I don't know half of what's going on).

Then I came across this blog: https://www.taniarascia.com/adding-syntax-highlighting-to-code-snippets/ and followed some of the instructions by doing the following:

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

where new.css is: https://github.com/taniarascia/new-moon/blob/master/docs/css/main.css

But now everything seems to be messed up and not beautiful. Most glaringly, my code is not syntax highlighted at all: enter image description here

What can I do to make my website pretty? To be honest I'm somewhat blindly following advice I find on the internet, which probably isn't the most productive, but I don't know where else to learn this kind of stuff.

PS. I use Vim if that is relevant.

Edit: Yes, I have the js files from prism as well right before the end of body: <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/prism.min.js"></script>.

Edit 2: Here's a minimal example if you want to try and recreate the problem (remember new.css is what I downloaded from 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>;
}
        </code></pre>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/prism.min.js"></script>
    </body>
</html>
Solution

  • The issue with you snippet is that HTML has already complied, and syntax is of hightlight.js not of prism.js. Let PrismJS compile you code snippet rather than converting it during .md file to .html file.

    eg: hljs-function syntax is used in hightlightjs not in 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>
</code>
</pre>