It is really a good practice to include scripts at the end of body tag in HTML.
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.
Attribute | Description | Example |
---|---|---|
name | Name of the file to be highlighted. |
|
lang | Language of the file to be highlighted. |
|
theme | Theme of the file to be highlighted. |
|
linecount | Whether to show line count or not. |
|
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 |
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.
CSPSH has many elements like code, linecount, copysvg, filename, theme-switcher, etc.
CSPSH uses a custom tag
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 |
.copyHolder- |
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- |
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- |
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 |
.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- |
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. |
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.
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.
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 |