Syntax Highlighting With Pure CSS – ft-syntax-highlight

Category: Javascript , Text | July 21, 2018
Author: soulshined
Views Total: 3,031 views
Official Page: Go to website
Last Update: July 21, 2018
License: MIT


Syntax Highlighting With Pure CSS – ft-syntax-highlight


ft-syntax-highlight is a pure CSS based Syntax Highlighter that comes with 8 custom themes and interactive tooltips.

Supported Languages:

  • CSS
  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • VB
  • XML

Basic usage:

Include the style sheet ft-syntax-highlight.css from src folder.

<link rel="stylesheet" href="ft-syntax-highlight.css">

Embed your source codes into the pre code tags as these:

<pre class="ft-syntax-highlight" data-syntax="js">
  <span class="comment">// Example JS Class</span>
  <span class="keyword">class</span> <span class="identifier-class">Rectangle</span> {
    <span class="identifier">constructor</span>(<span class="parameter">height</span>, <span class="parameter">width</span>) {
      <span class="object">this</span>.<span class="property">height</span> <span class="operand">=</span> height;
      <span class="object">this</span>.<span class="property">width</span> <span class="operand">=</span> width;
    <span class="comment">// Getter</span>
    <span class="identifier-native">get</span> <span class="identifier-udf">area</span>() {
      <span class="keyword">return</span> <span class="object">this</span>.<span class="identifier-udf">calcArea</span>();
    <span class="comment">// Method</span>
    <span class="identifier-udf">calcArea</span>() {
      <span class="keyword">return</span> <span class="object">this</span>.<span class="property">height</span> <span class="operand">*</span> <span class="object">this</span>.<span class="property">width</span>;

  <span class="keyword">const</span> <span class="identifier-constant">square</span> = <span class="keyword">new</span> <span class="identifier-class">Rectangle</span>(<span class="unit">10</span>, <span class="unit">10</span>);

  <span class="identifier-class">console</span>.<span class="identifier-native">log</span>(<span class="object">square</span>.<span class="property">area</span>); <span class="comment"> //100</span>

Config the Syntax Highlighter with the following data attributes:

  • data-syntax: defines the languages
  • data-syntax-theme: Dark (default), Bootstrap4, Burberry, Christmas, Halloween, Light, Midnight, Simple
  • data-ui-theme: bootstrap, midnight, one-dark, one-light,simple, vbgreen
  • data-showTooltips: displays tooltips on hover
<pre class="ft-syntax-highlight" data-syntax="js" data-syntax-theme="one-dark" data-showTooltips="true">



  • 4 New UI Themes, minified src file, and minor tweaks

You Might Be Interested In:

Leave a Reply