How do I apply syntax highlighting to code snippets in my HTML and CSS files?

Question

I recently started learning HTML and CSS.

When I use <code></code> it just displays as plain black and white text, although I would like it to automatically highlight the syntax appropriately.

It currently looks like this:

text = "Hello World!"
print(text)

I want it to look like this:

text = "Hello World!"
print(text)

Can it be achieved using only HTML and CSS?

Answer 1

serial number

---

Needs more detailed markup and CSS.

For example:

var {
  color: blue;
}

code.operator {
  color: red;
}

code.literal {
  color: purple;
}

code.function-call {
  color: green;
}

<pre><code class="python"><var>text</var> <code class="operator">=</code> <code class="literal">"Hello World!"</code>
<code class="function-call">print(<var>text</var>)</code>

---

To be completed in an automatic way, a programming language needs to be involved. You can use it to preprocess the code before passing it to the browser, or use client-side JavaScript to process it after the page loads.

There are various libraries available for use.