Highlight syntax without JavaScript

Features

SyntxCode supports multiple programming languages and syntax highlighting themes.:

Installation

Add SyntxCode to your project via CDN or download locally:

<link rel="stylesheet" href="https://unpkg.com/syntxcode@latest/dist/syntxcode.css">
                    

<link rel="stylesheet" href="path/to/syntxcode.css">
                    

Usage

Add the appropriate classes to the container with the code for syntax highlighting:

<div class="sxcode is-[language] theme-[name]">
  <pre><code>
    <!-- Your code with tok-* classes -->
  </code></pre>
</div>
                    

Examples of different languages

<div class="container">
  <h1>Hello World</h1>
  <p>Welcome to my website</p>
</div>
                    

h1 {
  color: red;
  margin: 1rem;
  font-family: sans-serif;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}
                    

function add(a, b) {
  return a + b;
}

const user = {
  name: "John",
  age: 30,
  isAdmin: false
};
                    

module MathUtils
  PI = 3.1415

  def self.circle_area(radius)
    PI * radius**2
  end
end

# comment
radius = 5
puts "Circle area: #{MathUtils.circle_area(radius)}"
                    

Token classes

SyntxCode uses a set of CSS classes for different types of tokens in the code. However, some languages has its own type of tokens like tok-preprocessor or tok-namespace etc. Below is a list of the main classes and their meanings:

/* Comments */
.tok-comment { color: #6a737d; }

/* Keywords */
.tok-keyword { color: #d73a49; }

/* Strings */
.tok-string { color: #032f62; }

/* Numbers */
.tok-number { color: #005cc5; }

/* Functions */
.tok-func { color: #6f42c1; }

/* Operators */
.tok-operator { color: #d73a49; }

/* Punctuation */
.tok-punc { color: #24292e; }

/* HTML tags */
.tok-tag { color: #22863a; }

/* HTML attributes */
.tok-attr { color: #6f42c1; }
                    

Thanks for using SyntxCode

And thanks other frameworks for inspiration. SyntxCode is inspired by other frameworks like Prism.js, Highlight.js, and others.