Easy Syntax Highlighting Library – CSPSH.js

Category: Javascript | August 15, 2022
Author:Chandra-sekhar-pilla
Views Total:172 views
Official Page:Go to website
Last Update:August 15, 2022
License:MIT

Preview:

Easy Syntax Highlighting Library – CSPSH.js

Description:

CSPSH is a tiny and easy-to-implement syntax highlighting library that helps developers showcase their code snippets in a nice way.

Features:

  • Light and Dark modes.
  • Copy code snippets with a single click.
  • Supports JavaScript, Java, C, C++, and StoryScript.
  • 3 built-in themes.

How to use it:

1. Import the CSPSH.

<script src="/path/to/CSPSH.js" type="module"></script>

2. Add your code snippets into a DIV container with the CSS class of CSPSH, specify the language in the lang attribute and select a theme as follows:

<div class="CSPSH" lang="java" name="example" theme="cspsh">       
  public class SumOfNumbers1
  {
  public static void main(String args[])
  {
  int n1 = 225, n2 = 115, sum;
  sum = n1 + n2;
  System.out.println("The sum of numbers is: "+sum);
  }
  }
</div>

3. Programming languages supported:

<div class="CSPSH" lang="java" name="example">       
  Java
</div>
<div class="CSPSH" lang="js" name="example">       
  JavaScript
</div>
<div class="CSPSH" lang="c" name="example">       
  C
</div>
<div class="CSPSH" lang="cpp" name="example">       
  C++
</div>
<div class="CSPSH" lang="sts" name="example">       
  storyscript
</div>

4. Available themes.

<div class="CSPSH" lang="java" name="example" theme="cspsh">       
  Java
</div>
<div class="CSPSH" lang="js" name="example" theme="monokai">       
  JavaScript
</div>
<div class="CSPSH" lang="c" name="example" theme="drakula">       
  C
</div>

5. To enable dark mode, just add the dark Class to the DIV container.

<div class="CSPSH dark" lang="java" name="example" theme="cspsh">
  Java
</div>

Changelog:

v4.0.1 (08/15/2022)

  • Improvements and bug fixes,
  • Changed the tag from span to cspsh custom tag.

v4.0.0 (08/06/2022)

  • Tabs system where you can embed two or more code into a single wrapper.
  • Line-highlight where you can highlight a specific line.
  • Fixed most of the bugs and optimised whole code, optimised CSS, and removed most of the unwanted code in JS files.

v3.5.7 (07/22/2022)

  • Bugfix

v3.5.7 (07/21/2022)

  • Added Theme switcher, line counter, Transitions

v2.5.7 (06/03/2022)

  • Hotfix

v2.5.6 (05/22/2022)

  • Hotfix

v2.5.5 (05/15/2022)

  • Hotfix

v2.4.5 (05/11/2022)

  • Hotfix

v2.4.4 (05/10/2022)

  • Line count shows how many lines a code is in the left side bar.

05/03/2022

  • Hotfix

You Might Be Interested In:


Leave a Reply