Initialization:

  • Initializing CSPSH is very simple.
  • All user need to do is to create a tag with class="cspsh" and theme and type userr code.
  • While defining the tag user an define some attributes like name, lang, theme , and linecount.
  • These attributes are used as some options for cspsh to tell what language it has to highlight, what is the name of file, theme user want to use, etc.
  • There are other options for CSPSH such as file and highlightLine
  • Another important point to notice is that CSPSH.js is a module so while including/attaching script to userr html give module as the value for type and same goes for userr script as well.
  • Because user have to import CSPSH class to run the highlighter.
<script src="./Source/CSPSH.js" type="module"> </script> <script src="script.js" type="module"> </script> <div class="cspsh" name="index" theme="monokai" lang="js" linecount="true"> user code here </div>

Tip:

It is really a good practice to include scripts at the end of body tag in HTML.

CSPSH class:

  • CSPSH is the main class that has different functions like highlight() and nullOptions() .
  • To start highlighting user's code using CSPSH user need to create an object for the main class CSPSH .
  • After creating the obejct for CSPSH user can use highlight method to start highlighting.
    Althought user have provided everything the highlighting doesnt start. Because user need to provide the options for highlight method
  • user can click on the options to know more about options. But if user don't want any other specific highlighting user can use nullOptions() method to pass null options for highlight method.
  • Options have to be passes compulsorily.

Note:

Please note that user have to import the CSPSH class form CSPSH.js which will be in './Source/CSPSH.js'. So user have to use type='module' for user script as well.

Here is an example on how user can do it:

import {CSPSH} from '/Source/CSPSH.js'; window.onload = () =>{ const cspsh = new CSPSH(); }
  • Here highlight(options) is the main method that highlights the code inside the tag with class cspsh.
  • It is written in the window.onload event method.

Options

  • Options are used to define some extra settings for highlighting.
  • There are two options (currently) and they are:

    1. file:

      Which defines the filenames of the codes (it is used in combination with another option highlightLine). This is a list/array of strings and must give the full filename with extension (ex: ["index.js", "script.js"])

    2. highlightLine:

      This option is used to tell cspsh that user wants to highlight a specific line in his code in a specific file. This is an array of array... of integers (ex: [[12, 20], [2, 5]]). see the example below to know more on how to use it.

    3. Source:

      This option tells the path of the CSPSH.js file. This option should be provided and mandatory. If you are unsure about the path you can use default.
  • The file and highlightLine options works together. i.e. If user provides the file: ["index.js", "script.js"] and highlightLine: [[12, 22], [2, 5]] this means that you want to highlight 12th and 22nd lines in index.js file and 2nd and 5th lines in script.js file.
  • If user don't want to highlight a single line then user must pass null options. But user cannot do something like cspsh.highlight(null). Instead user can use an inbuilt method which will set all the options to null.
  • The syntax for passing options is shown below.

Example 1:

//see the previous code to know how to initialize cspsh Custom options //single file, multiline highlight const options = {file: ['index.js'], highlightLine: [12, 20, 22]}; cspsh.highlight(options); //Passing null options method-1: cspsh.highlight(cspsh.nullOptions()); //Passing null options method-2: const options = { file: null, highlightLine: null }; cspsh.highlight(options);

Example 2:

//multi-file, multiline highlight const options = { file: ['index.js', 'script.js'], highlightLine: [[12, 20, 22], [2, 5]] }; //this will highlight 12th, 20th and 22nd lines in index.js and 2nd and 5th lines in script.js cspsh.highlight(options);

Attributes:

  • Attributes are used to define the options for highlighting.
  • Attributes are defined as name, lang, theme, and linecount
  • These attributes are used as some options for cspsh to tell what language it has to highlight, what is the name of file, theme user want to use, etc.
Attribute Description Example
name Name of the file to be highlighted. name = "index"
lang Language of the file to be highlighted. lang = "js"
theme Theme of the file to be highlighted. theme = "monokai"
linecount Whether to show line count or not. linecount = "true"

These are the supported values for the attributes:


Attribute Supported values Defaults
name Name of the file without extension. A string literal file
lang(basically extension of the file) js, ts, java, sts, c, c++, c#, css(still in dev), html(still in dev) No default value. User must provide the language.
theme monokai, cspsh, drakula cspsh
linecount true, false false

Tabs:

  • Tabs are used to switch between different codes.
  • To initialize tabs user need to put all the codes that they want to wrap into tabs inside an element whose classname must be cspshBuildTabs.
  • After doing this user can type their codes inside this element using same process.
  • user can click on the tabs to switch between them.

Serious Note:

While using tabs feature user must not use same file name for two or more codes. For example user cannot use index.js as a filename for 2 codes, but user can use index.js and index.c for two different codes. Because CSPSH implements tabs based on the filename and extension.

Here is the code snippet for implementing tabs:

<div class="cspshBuildTabs"> <div class="CSPSH" lang="js" name="example" theme="monokai" linecount = 'true'> //code 1 </div> <div class="CSPSH" lang="c" name="example" theme="drakula" linecount = 'true'> //code 2 </div> </div>

Simple mode:

  • Simple mode is a new mode which was introduced in v5.1.0 which will show the code in simple form without any theme changers, or filenames or linecount.
  • In simple words simple mode is just simple looking code. widths, heights will be perfect fit for the code width. Filename, theme changers, theme using will be completely removed. All user sees is a snippet with some syntax highlighting and copy button.
  • Yet users/developers can modify the attributes with ease. Like showing lincount, manipulating the widths and heights, etc.
  • All the codes in this website uses CSPSH and are in simple mode. (but i increase the width tho)
  • Here is how you can use simple mode.
<div class="cspsh" name="index" lang="js" theme="monokai" mode="simple"> //code here </div>

Styling CSPSH elements:

CSPSH has many elements like code, linecount, copysvg, filename, theme-switcher, etc. CSPSH uses a custom tag <cspsh> for highlighting each token. So for applying different font-size or font-family for all the tokens user can use cspsh tag for manipulating. For highlighting the whole wrapper of code user can use the class name .CSPSH.

Warning:

User can change the styling of different elements of CSPSH. But all the styling should be done in user's stylesheet. So please don't change the default styling of CSPSH. user can refer to the stylesheets if necessary.

User can manipulate any element using their class name or id. Here is a list of the class names and IDs user can use to style the elements of cspsh.

Class/Id Description
.CSPSH This is the class name for the whole CSPSH. It's like a wrapper which wraps all the elements user see in the div block from copy svg to the end of userr code .CSPSH holds everything.
.copyHolder-theme(in uppercase) This the tab that holds all the info about the code that is shown below (inside the element).
That means it holds the information like Filename:, Themes:, Current theme:, and the copy svg(copy button).
.lineCount-theme(in uppercase)-done This is the class name for the linecount holder. The element which holds the line count of the code.
User can manipulate the styling of line count using this class name.
.sh-theme(in uppercase)-lineHighlight This class is used to style a single line provided in options.
#code This the holder of the whole code that was highlighted.
All the cspsh tags are present inside this #code element.
#blackLine and #greyLine These are the Ids of the copy to clipboard button. #blackLine is the Id of the black-colored box and #greyLine is the Id of the grey-colored box.
User can change the color of these by using fill and stroke properties. Where fill the color of the svg and stroke is the border-color of the svg.
.CSPSHsvg This is the class of the whole copy to clipboard button. #blackLine and #greyLine are wrapper inside this element.
.copyVector This is the class of the button that holds the "copy to clipboard" svg.
.cspsh-indentationGuidelines This is basically the empty spaces that were used to format the code inside cspsh. To change the color of indentation guidelines user can change the border-left property.
.changeTheme .changeTheme holds all the theme buttons that are shown on the menu bar of cspsh.
.themeChangers These are the buttons actual buttons used to change the theme of cspsh. These elements are the childs of .changeTheme
.cspshBuildTabs All the code with tabs enabled will be written inside this element. See tabs for more information.
.tabChangersWrapper Wrapper of all the buttons. Both active and inactive buttons.
.cspshChangeTab Common class name for all the tab buttons.
.inactiveTab All the inactive buttons.
.activeTab The button of active tab
.sh-theme (in uppercase)-token The color of tokens(code that displayed inside the cspsh). Theme should given in uppercase. Tokens are types, keyword, variable, class, operator, string, numerals, Func, comments, inBuilt, preprocess, classSelector, idSelector, property, value.

Here is the detailed image on the elements of the CSPSH.

CSPSH_info

This is the detailed image of the elements of the cspsh and their ids and class names. If user want to add their own styles they can refer to this image or the table above.

Note:

The documentation will be updated everytime a new version of cspsh is released. So if you are using any previous version you can either download the new version or simply refer to the below table if the feature is available for the version you have.

Versions info:

Feature(Sorted by latest to old) Supported Versions Download
Simple mode 5.1.0+ Download v5.1.1Latest
New CSPSH palette, python, css support 5.0.0+ Download v5.1.1Latest
Multi line highlight(single file) 4.1.1+ Download v4.1.1Latest in v4
Single Line highlight(single file) 4.0.0+ Download v4.1.1Latest in v4
Tabs system 4.0.0+ Download v4.1.1Latest in v4
Theme switcher 3.5.7+ Download v3.5.8Latest in v3
Individual themes(can apply different themes for different codes) 2.5.5+ Download v2.5.7Latest in v2
Line count 2.4.4+ Download v2.5.7Latest in v2
More language support(except python) 2.2.2+ Download v2.5.7Latest in v2
Unified Drakula and Monokai themes(applies for all codes) 2.2.2+ Download v2.5.7Latest in v2
Dark and light mode 1.0.0 to 2.1.2 (deprecated from v2.2.2) Download v2.1.2
Basic syntax highlighting(with perfect string highlighting) 1.2.0+ Download v1.3.2Latest in v1
Basic syntax highlighting(without perfect string highlighting) 1.0.0+ Download v1.3.2Latest in v1