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"><stdio.h></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.
Aucun commentaire:
Enregistrer un commentaire