Easy Syntax Highlighting Library – CSPSH.js

Category: Javascript | December 23, 2023
Author:CSP02
Views Total:110 views
Official Page:Go to website
Last Update:December 23, 2023
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++, Python, 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>
<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="py" name="example" theme="drakula">       
  Python
</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>

6. Enable simple mode.

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

Changelog:

12/23/2023

  • Updated theme switchers

v5.1.1 (07/14/2023)

  • Bugfix

v5.1.0 (07/09/2023)

  • Added simple mode
  • Added multiple file multi-line highlight
  • Fixed known bugs

v5.0.0 (06/25/2023)

  • Added python support
  • optimised code
  • changed the cspsh color palette

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