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

Question

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:

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>

Have you added the script file of prismjs too? Asking because I am not able to see it. — Neha Sharma, Oct 22 '19 at 06:01
@NehaSharma ya I think, it's this right: ``, I put it in before the end of body, just like the blog was saying. — herophant, Oct 22 '19 at 06:15
@herophant the link you shared is broken (assuming you have the right file). https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/prism.min.js - this is the file. Also, which browser you are testing on? — Neha Sharma, Oct 22 '19 at 06:19
@NehaSharma I fixed the link (but the links actually look identical to me), and the same thing is happening. I am on Windows 10, and I'm testing using Chrome. Also, this is not on an actual website. I'm just opening up a local html file if that would make any difference. — herophant, Oct 22 '19 at 06:27
@NehaSharma I'm not sure how using links to the internet in html actually works, but it seems that when I remove `new.css` (which is on my hard drive) and replace it with `https://github.com/taniarascia/new-moon/blob/master/docs/css/main.css` instead, all of the CSS is gone and there is only plain HTML. Is this expected? Could it be possible that my browser is not actually fetching the prismjs using that link? That it's not fetching any link at all? — herophant, Oct 22 '19 at 06:38

score 0 · Accepted Answer · answered Oct 22 '19 at 06:41

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>

Can you explain in your answer the reasons that we need Prism theme, main and languages? I have no idea why we need to import (?) all three of these things or what they are doing. Again, I'm very new to this. — herophant, Oct 22 '19 at 08:34
`Prism.css`: CSS theme `Prism.js` : compile `script` code to DOM. `Prism-C.JS`: Lang specific templating. Coz each language has a very different code structure. — Sumit Ridhal, Oct 22 '19 at 09:11

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

1 Answers1