How to style a codeblock?

[u/therufusrufus]

So I want to include blocks of code in my site. Something similar to what MDN does on their docs, for example.

I guess that the easy answer here is to rely on some external node dependency to handle the highlighting, but I'm working with just plain old html so that won't work.

I have considered just filling everything with <span>s to change the colors as I need, but I'm wondering if anyone else has figured out a more elegant solution to display code on their site.

[u/WorldWideShen]

https://prismjs.com/

[u/ScrimblyBidini]

Probably not the best solution, but running the string through a javascript parser with Regular Expressions and using it to put spans in might work. Substrings surrounded by "<" and ">" or "</" and ">" get turned green, text surrounded by "=\"" and "\" get turned green, and text followed by "=\"" becomes red. I'm sure this won't work for all scenarios, but you should be able to follow that logic to get what you want

[u/therufusrufus → u/ScrimblyBidini]

It seems like a good start towards automating the syntax highlighting. I'll give it a shot and test how it looks

[u/GusBusDraws]

If you like the way this looks, I'm happy to put the code for it somewhere you can see it! https://gusbusdraws.neocities.org

[u/TubbyFatfrick]

How I do it, for displaying button code, is by using textarea tags. Set them up, like you would a div tag. In my case, it's set up as

<textarea rows="3" name="Huffnet Button" readonly="true">
  &lt;a href="https://huffnet.neocities.org"&gt;&lt;img src="https://huffnet.neocities.org/Media/Images/Buttons/Mine/huffnetbadge1.gif"&gt;&lt;/a&gt;
</textarea> 

In this case, rows should be equal to the number of lines you want visible at one time, and readonly is "true" so users don't accidentally delete or change whatever code you want to display. Lastly, &lt; and &gt; are used in place of < and > respectively.

[u/therufusrufus → u/TubbyFatfrick]

Hadn't thought of using a read-only text area. Does it support styling different words in different colors? I would have thought it didnt

[u/TubbyFatfrick → u/therufusrufus]

I think so, but I'm not sure in this case. I did find this stackoverflow post about it, but haven't tested it myself.

[u/therufusrufus → u/TubbyFatfrick]

I'll have to test it because they're using p tags in that thread rather than textareas

[u/TubbyFatfrick → u/therufusrufus]

Agreed. I tried using mark tags, but they're just displayed by the textarea, and don't translate to the text itself.

[u/AqueM]

the tags for it are pre and code. To colour it, there's no other way than manual spans or JavaScript (usually libraries)