Member Avatar for Labdabeta

How do you show code on a website? Right now I define a bunch of CSS styles called Comment, Preprocessor, Keyword, etcetera. Then make a two column table, make the left column line numbers and and the right column each row has a line of code. Then I manually go through the code assigning CSS styles where appropriate. The problem is that this is tedious, especially for long pieces of code and it is not portable so if I need to change things it takes a long time. I am very new to website programming and have no idea where to start with this. Any help?

  • 3 Contributors
  • 5 Replies
  • 183 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by pritaeas

Dani AI

Generated

You don’t need a two-column table or manual token colouring — use semantic HTML and an existing highlighter so the library handles tokenising, classes and styles for you. Wrap blocks in <pre><code class="language-cpp">...</code></pre> (that’s the recommended pattern) and drop in a client-side highlighter like Prism or Highlight.js to automate styling. This keeps the markup portable and much easier to maintain. MDN: <pre> element. (developer.mozilla.org)

Quick, practical workflow you can apply now:

  1. Put raw code inside <pre><code class="language-cpp">...</code></pre>.

  2. Make sure <, > and & are escaped if you’re injecting HTML server-side.

  3. Include the highlighter’s CSS/JS and call its init function (Prism.highlightAll() or hljs.highlightAll()), or pre-render at build time. Example markup:

    <pre><code class="language-cpp">
    #include <iostream>
    int main() {
    std::cout << "Hello\n";
    }
    </code></pre>

See Prism and Highlight.js docs for CDN or build options. (prismjs.com)

If you want line numbers or collapsible answers: use official plugins instead of handcrafted tables. Prism has a Line Numbers plugin; Highlight.js has community line-number plugins and ecosystem tools for line highlighting. For “click to reveal” content prefer the native <details><summary> pattern for an accessible, no-JS solution — you can nest your <pre><code> inside it. Example:

<details>
<summary>Show solution</summary>
<pre><code class="language-cpp">...code...</code></pre>
</details>

Plugin docs and the <details> spec explain usage and fallbacks. (dev.prismjs.com)

If you want server-side / build-time highlighting (good for static sites or reducing client JS), use a tool like Pygments or Prism’s Node APIs to emit highlighted HTML during your build. That way you keep pages fast and editable without manual token work. Good catch by pointing toward highlighters, and ’s CSS+JS idea is exactly where <details> and these tools fit. (pygments.org)

Recommended Answers

All 5 Replies

Member Avatar for simplypixie

Can I ask why you want to show code on a website?

Member Avatar for Labdabeta

Because I was challenged by a friend to make a C++ tutorial website and I am determined to win my challenge ;). Also how can I have hidden content (so you press a button and all of a sudden extra text appears.

Member Avatar for simplypixie

Unfortunately I don't think I can help but I think you mean to display code like you would on this forum, in code tags, and I don't know how to do that (mainly because I have needed to do it so haven't looked into how it is done).

With regard to hidden content which shows on the click of a button that would need a mix of CSS and JavaScript - many tutorials on the web.

Sorry to have not been more help.

Member Avatar for Labdabeta

Ok, I guess I will stick to my tables of manually coloured syntax :( Thank you anyways.

Member Avatar for pritaeas

Were you looking for a syntax highlighter ? There are many more than the one I linked. (I know this was solved, but it may help others.)

Edited by pritaeas because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.