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">
  <code>
  <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>
  </code>
</pre>

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">
  <code>
    ...
  </code>
</pre>

Changelog:

07/21/2018

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