CSS Only Syntax Highlighter

Category: CSS & CSS3 | June 28, 2022
Author:nrxero
Views Total:34 views
Official Page:Go to website
Last Update:June 28, 2022
License:MIT

Preview:

CSS Only Syntax Highlighter

Description:

The pure CSS syntax highlighter is a simple JavaScript-free tool that lets you highlight source code using only CSS classes.

How to use it:

1. Download and insert the syntax.css into the document.

<link rel="stylesheet" href="./syntax.css" />

2. Add the CSS class ‘syntaxbox’ to the ‘code’ tag.

<code class="syntaxbox">
  ...
</code>

3. Highlight your source code using the following CSS classes:

  • identifier: HTML element identifier.
  • identifier end: HTML element identifier (end).
  • value: Value
  • value link: Link
  • attribute: HTML attributes
  • newline: New line
  • comment: HTML comment
<code class="syntaxbox">
  <span class="newline">
    <span class="identifier">code
      <span class="attribute">class</span>
      <span class="value">syntaxbox</span></span>
    </span>
    <span class="newline"></span>
    <span class="newline" data-level='1'>
      <span class="comment">HTML Comment</span>
    </span>
    <span class="newline" data-level='1'>
      <span class="identifier">a
        <span class="attribute">href</span>
        <span class="value link">https://www.cssscript.com</span>
      </span>CSSScript.com
      <span class="identifier end">a</span>
    </span>
    <span class="newline"></span>
    ....
</code>

You Might Be Interested In:


Leave a Reply