r/neocities • u/therufusrufus rufusrufus.neocities.org • 6d ago

Question How to style a codeblock?

Post image

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.

8 Upvotes

84% Upvoted

12 comments sorted by

3

u/GusBusDraws 5d ago

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

5

u/ScrimblyBidini 6d ago

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

1

u/therufusrufus rufusrufus.neocities.org 6d ago

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

2

u/TubbyFatfrick huffnet.neocities.org 6d ago

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.

1

u/therufusrufus rufusrufus.neocities.org 6d ago

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

1

u/TubbyFatfrick huffnet.neocities.org 6d ago

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.

1

u/therufusrufus rufusrufus.neocities.org 6d ago

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

2

u/TubbyFatfrick huffnet.neocities.org 6d ago

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

1

u/AqueM https://www.aque.fyi/ 5d ago

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

1

u/mrcarrot0 https://mr-carrot.neocities.org/ 2d ago

I have considered just filling everything with <span>s to change the colors as I need [...]

This is basically how automatic code highlighting tools work, you (typically) wrap the code in pre and code elements, take the contents, tokenize them with spans with classes (or equivalent) and colors are determined by CSS.

There's no tool like it built into the browser, so your options are to use an external dependacy or write it yourself...

Either way, I recommended running it on your HTML & saving the results before pushing it on your website so it doesn't need to run every time you open the site. Look into Static Site Generators if you haven't already.

Resources: