A syantax highlighting library (or) package for highlight your codes in webpages.
- Download the package and include the script using script tag as shown in below
<head>
<script src='./Source/CSPSH.js' type='module'></script>
</head>-
It is recommended to place the script tag at the end of your
bodytag in html. NOTE: Make sure to place the Source folder in this repo to your directory where your main html file is present (or) paste the exact path of CSPSH.js. But I recommend to copy the source folder to your work folder because CSPSH.js will automatically adds the css files once it is loaded. -
In HTML define a class name with
CSPSHinorder to make CSPSH.js realise the code that is written in that element(I personally prefer div tag for that) and theme attribute to eithermonokaiordrakulaor default themecspshto choose the theme scheme and lang is the language of the code that is written inside the tag. see the example below for better understanding.
<div class="CSPSH" lang = 'js' name="fileName" theme="monokai"></div><!--Filename is optional and it will be "file" if the field is empty-->- Start typing your code inside this tag.
- In the previous version you have to seperate each word by spaces which is no longer required.
- Another impovement the strings. Yes now it can detect any kind of strings with spaces wothout spaces it just highlights(if you found any issue you can create a issue).
- It has basic formatting too.
<!--Example-1-->
<div class="CSPSH" lang = 'js' name="fileName" theme="monokai">
const toggler = new Toggler;
toggler.toggleClass('myId', 'fromClass', 'toClass');
</div>- Fixed some css.
- Organized code.
- Created CSPSH class. visit docs for more info.
- Added lineCount (Not responsive for now will make it responsive soon).
- Now user can decided if their code should show the line count or not just by defining an attribute
linecount = trueto make them visible and not mentioning the attribute for hiding the line count. - Now the code will be change into code tag.
- Improved CSS, Copy to clipboard system.
- Added language suppport as said these are the language that were added but there are some keywords, types, etc I didn't add. Because I don't know all those things. And you are welcomed to help me in adding those things.
- JavaScript
- Java
- C language
- C++
- StoryScript
- TypeScript(almost js and ts are same so you don't find any extra file for typescript)
- C#(almost C# and Java are same so you don't find any extra file for C#)
- Optimized css. Previously there is a seperate css for every lang but I combined the styles(colors) for same colors (ex: types for all langs use same color).
- This update covers all the previous beta and alpha update so consider this update as the latest stable update.
Planned improvements
- Add some more themes.
- (optional) Add light mode if requested by any.
- Add tabs system.
Example
<div class="CSPSH" lang = 'js' name="ValidCode" theme="drakula">
//single line comments
/*multi
line
comments*/
const toggler = new Toggler
toggler.toggleClass ('myId', 'fromClass', 'toClass')
var a = 1
var b = 2
console.log(biggest(a, b))
function biggest(a, b) {
if (a < b){
return b
} else {
return a
}
}
</div>Note:
- When user uses
window.onloadevent in their scripts they might face some problems in functionality. To avoid that problem use the code shown below inwindow.onloadin user's script:
script.js
window.onload = function(){
//code that user wants to perform
const cspsh = new CSPSH
cspsh.highlight()
}-
This will automatically highlightes the code which has CSPSH as class name for more info visit docs. Link for story script(extention is sts)
-
StoryScript is created and developed by @lines-of-codes using python. Learn more.
-
Join our discord server for any queries the-atelier
NOTE: It is recommended that not to format the code in your html with the tab spaces its not necessary. But you must use new line(enter or a semicolon) to make it identify the new lines.