├── .gitattributes ├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── .gitignore ├── .vscode ├── CSPSH_snippets.code-snippets └── settings.json ├── LICENSE ├── README.md ├── Resources ├── CSPSH(withGrad).png └── CSPSH.png ├── Source ├── CSPSH.js ├── CSPSH │ ├── HighLight.js │ ├── SyntaxHighlight.js │ └── TabBuilder.js ├── LangTokens │ ├── CSPSHC.js │ ├── CSPSHCPP.js │ ├── CSPSHCSS.js │ ├── CSPSHHTML.js │ ├── CSPSHJAVA.js │ ├── CSPSHJS.js │ ├── CSPSHPY.js │ └── CSPSHSS.js └── ThemeStyles │ ├── CSPSHDARK.css │ ├── DRAKULADARK.css │ └── MONOKAIDARK.css ├── index.css ├── index.html └── index.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Node rules: 2 | ## Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 3 | .grunt 4 | 5 | ## Dependency directory 6 | ## Commenting this out is preferred by some people, see 7 | ## https://docs.npmjs.com/misc/faq#should-i-check-my-node_modules-folder-into-git 8 | node_modules 9 | *.ini 10 | 11 | # Book build output 12 | _book 13 | 14 | # eBook build output 15 | *.epub 16 | *.mobi 17 | *.pdf 18 | -------------------------------------------------------------------------------- /.vscode/CSPSH_snippets.code-snippets: -------------------------------------------------------------------------------- 1 | { 2 | "Initialize CSPSH": { 3 | "scope": "javascript, typescript", 4 | "prefix": "cspsh", 5 | "body": [ 6 | "const cspsh = new CSPSH;", 7 | ], 8 | "description": "Initialize CSPSH class" 9 | }, 10 | 11 | "with user defined variable name":{ 12 | "scope": "javascript, typescript", 13 | "prefix": "cspsh", 14 | "body": [ 15 | "const $1 = new CSPSH;", 16 | ], 17 | "description": "with user defined variable name" 18 | }, 19 | 20 | "with user defined variable name and default options":{ 21 | "scope": "javascript, typescript", 22 | "prefix": "cspsh", 23 | "body": [ 24 | "const $1 = new CSPSH;", 25 | "$1.highlight($1.defaultOitons());" 26 | ], 27 | "description": "with user defined variable name and default options" 28 | }, 29 | 30 | "with user defined variable name and user defined options":{ 31 | "scope": "javascript, typescript", 32 | "prefix": "cspsh", 33 | "body": [ 34 | "const $1 = new CSPSH;", 35 | "$1.highlight({", 36 | " file: $2,", 37 | " highlightLine: [$3],", 38 | " SourcePath: \"$4\"", 39 | "});" 40 | ], 41 | "description": "with user defined variable name and default options" 42 | }, 43 | 44 | "use highlight method with default options":{ 45 | "scope": "javascript, typescript", 46 | "prefix": "cspsh", 47 | "body": [ 48 | "cspsh.highlight(cspsh.deafultOptions());" 49 | ], 50 | "description": ".highlight method with default options" 51 | }, 52 | 53 | "use highlight method with user defined options":{ 54 | "scope": "javascript, typescript", 55 | "prefix": "cspsh", 56 | "body": [ 57 | "const cspsh = new CSPSH", 58 | "cspsh.highlight({", 59 | " file: \"$1\",", 60 | " highlightLine: [$2],", 61 | " SourcePath: \"$3\"", 62 | "})", 63 | ], 64 | "description": "with user defined options" 65 | }, 66 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501, 3 | "python.analysis.typeCheckingMode": "basic" 4 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 chandu-programmer 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSPSH 2 | 3 | ![CSPSH-SyntaxHighlighter](https://github.com/CSP02/CSPSH/blob/main/Resources/CSPSH.png) 4 | A syantax highlighting library (or) package for highlighting your codes in webpages. 5 | 6 | ![issues](https://img.shields.io/github/issues/CSP02/CSPSH) 7 | ![forks](https://img.shields.io/github/forks/CSP02/CSPSH) 8 | ![stars](https://img.shields.io/github/stars/CSP02/CSPSH) 9 | ![license](https://img.shields.io/github/license/CSP02/CSPSH) 10 | ![version](https://img.shields.io/badge/Version-5.1.1-green) 11 | 12 | - Yo help me in adding feature. Well simply comment which feature you want I will try to add. Because *cough* I can't get any feature ideas. Thank you 🙏 13 | 14 | # Steps to use: 15 | 16 | - Download the library and include the script using script tag as shown below or import into your js file 17 | 18 | ```html 19 | 20 | 21 | 22 | 23 | ``` 24 | 25 | or 26 | 27 | ```js 28 | import {CSPSH} from 'path to the CSPSH.js file' 29 | ``` 30 | 31 | - It is recommended to place the script tag at the end of your ``body`` tag in html. 32 | **NOTE: Make sure to place the Source folder of this repo into 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 add all the required css files once the page is loaded.** 33 | 34 | - In HTML define a class name with ``CSPSH`` in order to make CSPSH.js realise the code that is written in that element(I personally prefer div tag for that) and theme attribute to either ``monokai`` or ``drakula`` or default theme ``cspsh`` to choose the theme scheme and lang is the language of the code that is written inside the tag/element. see the example below for better understanding. 35 | 36 | ```html 37 |
38 | ``` 39 | 40 | - Start typing your code inside this tag. 41 | 42 | ```html 43 | 44 |
45 | const toggler = new Toggler; 46 | toggler.toggleClass('myId', 'fromClass', 'toClass'); 47 |
48 | ``` 49 | 50 | - After typing your code go to your JS file and create a ``window.onload`` event and inside ``window.onload`` create an object for ``CSPSH`` class. In previous versions this is not required becasue this package don't take any user options from the JS file but as two new features were added options are compulsory. 51 | - For more information about the options please visit the [CSPSH documentation](https://csp02/The-Atelier/Pages/CSPSH/cspshDocs.html). 52 | - Now run the highlight method inside CSPSH object using the ``.highlight(options)`` method where options can be user defined as shown in docs. 53 | 54 | # Major Version info: 55 | 1. Added support for python(but python code cannot be formatted by cspsh itself user have to format but for other languages cspsh can format) 56 | 2. Added support for css. 57 | 3. Fixed some known bugs 58 | 4. Changed the theme palette for cspsh theme 59 | 60 | # Minor version info 61 | 1. Added simple mode which will *yeet* i mean remove all the fancy stuff and shows code in simple way. 62 | 2. Added multiple file multiple linehighlight...sounds confusing yes well lemme elaborate. In the previous versions users can't highlight specific lines for multiple files. But it is no more in this update I added this new feature. 63 | 3. Optimized some code. 64 | 65 | # Optimizations: 66 | - Accurate copy to clipboard functionality 67 | - Accurate line count functionality 68 | - Improved scrolling and fixed a bug where the scroll bar of whole document changes. Now the scrollbar changes only for CSPSH code. 69 | 70 | **Planned improvements** 71 | - Add some more themes. 72 | - Add more language support. well done by giving c lang highlighting for any other langs. 73 | 74 | **Example** 75 | 76 | ```html 77 |
78 | //single line comments 79 | /*multi 80 | line 81 | comments*/ 82 | const toggler = new Toggler 83 | toggler.toggleClass ('myId', 'fromClass', 'toClass') 84 | var a = 1 85 | var b = 2 86 | console.log(biggest(a, b)) 87 | function biggest(a, b) { 88 | if (a < b){ 89 | return b 90 | } else { 91 | return a 92 | } 93 | } 94 |
95 | ``` 96 | **Note:** 97 | - User must define the window.onload event in the JS file and create an object for CSPSH and run ``highlight(options)`` method. If user doesn't define the window.onload event in the JS file then the code will not get highlighted. 98 | > script.js 99 | ```js 100 | window.onload = function(){ 101 | //code that user wants to perform 102 | const cspsh = new CSPSH 103 | const options = { 104 | file: ['file.extension'], 105 | highlightLine: [[12, 20, 22]], 106 | SourcePath: '/Source' 107 | } 108 | cspsh.highlight(options) 109 | } 110 | ``` 111 | - This will automatically highlight the code which has CSPSH as class name for more info visit [docs](https://csp02/The-Atelier/Pages/CSPSH/cspshDocs.html). 112 | **Link for story script(extention is sts)** 113 | - StoryScript is created and developed by @lines-of-codes using python. [Learn more](https://github.com/StoryScriptorg/StoryScript/tree/main/storyscript). 114 | 115 | - Join our discord server for any queries [the-atelier](https://discord.gg/6Mcy5NpSpH) 116 | 117 | **NOTE: It is not recommended to format your HTML Code with tab spaces(unless it's python code) as its not necessary. But you must use new line(enter or a semicolon) to make it identify the new lines.** -------------------------------------------------------------------------------- /Resources/CSPSH(withGrad).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSP02/CSPSH/008c7b16829fed8fde11c7bb7897bd7b375de7d2/Resources/CSPSH(withGrad).png -------------------------------------------------------------------------------- /Resources/CSPSH.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CSP02/CSPSH/008c7b16829fed8fde11c7bb7897bd7b375de7d2/Resources/CSPSH.png -------------------------------------------------------------------------------- /Source/CSPSH.js: -------------------------------------------------------------------------------- 1 | //importing all the tokens of each language 2 | import { JSTOKENS } from './LangTokens/CSPSHJS.js' 3 | import { CPPTOKENS } from './LangTokens/CSPSHCPP.js' 4 | import { CTOKENS } from './LangTokens/CSPSHC.js' 5 | import { JAVATOKENS } from './LangTokens/CSPSHJAVA.js' 6 | import { SSTOKENS } from './LangTokens/CSPSHSS.js' 7 | import { HTMLTOKENS } from './LangTokens/CSPSHHTML.js' 8 | import { CSSTOKENS } from './LangTokens/CSPSHCSS.js' 9 | import { PYTOKENS } from './LangTokens/CSPSHPY.js' 10 | 11 | //importing other files that required cspsh 12 | import { HighLight } from './CSPSH/HighLight.js' 13 | import { BuildTabs } from './CSPSH/TabBuilder.js' 14 | 15 | //Initializing all the required variables and constants. 16 | let content = [] 17 | let openBraceCount = 0 18 | let fileName 19 | let isEOLINFOR 20 | let forCount 21 | let lang 22 | let theme = 'cspsh' 23 | let themesList = [] 24 | let tempStr = [] 25 | let lineCountHolder 26 | let lineCount = 0 27 | let code 28 | let params 29 | let links = [...document.head.getElementsByTagName('link')] 30 | let codeAndLineCount 31 | let tempClassName 32 | let codeHolder 33 | let codeContent 34 | 35 | //the following block will move the user's css to the down 36 | for (let h = 0; h < links.length; h++) { 37 | let link = links[h] 38 | link.parentElement.removeChild(link) 39 | } 40 | const copySvg = ` 41 | 42 | 45 | 47 | ` 48 | 49 | export class CSPSH { 50 | //Runs right after the page is loaded 51 | highlight(options) { 52 | try { 53 | let codes = document.getElementsByClassName('CSPSH'); 54 | let sourcePath = options.SourcePath; 55 | let mode = options.mode; 56 | if (options.SourcePath === 'default') 57 | sourcePath = '/Source' 58 | document.head.innerHTML += `` 59 | document.head.innerHTML += `` 60 | document.head.innerHTML += `` 61 | 62 | //Reads the required attributes and links the required stylesheets based on selected theme 63 | for (let i = 0; i < codes.length; i++) { 64 | codeHolder = codes[i] 65 | fileName = codeHolder.getAttribute('name') 66 | codeHolder.className += ` ${codeHolder.getAttribute('theme').toUpperCase()}` 67 | if (codeHolder.getAttribute('theme') && !themesList.includes(codeHolder.getAttribute('theme'))) { 68 | if (codeHolder.getAttribute('theme').split(' ').length > 1) 69 | theme = codeHolder.getAttribute('theme').split(' ')[0]; 70 | else 71 | theme = codeHolder.getAttribute('theme') 72 | themesList.push(theme) 73 | } else 74 | theme = codeHolder.getAttribute('theme') 75 | if (!fileName) { 76 | fileName = `file`//sets default file name to file 77 | } 78 | //push all the code content. 79 | content.push(codeHolder.textContent) 80 | codeContent = codeHolder.textContent 81 | //Detect the language and start highlighting 82 | switch (codeHolder.lang) { 83 | case 'js' || 'ts': 84 | lang = new JSTOKENS() 85 | break 86 | case 'cpp': 87 | lang = new CPPTOKENS() 88 | break 89 | case 'c': 90 | lang = new CTOKENS() 91 | break 92 | case 'java' || 'c#': 93 | lang = new JAVATOKENS() 94 | break 95 | case 'sts': 96 | lang = new SSTOKENS() 97 | lineCount = 0 98 | break 99 | case 'css': 100 | lang = new CSSTOKENS(); 101 | lineCount = 0 102 | break 103 | case 'html': 104 | lang = new HTMLTOKENS(); 105 | lineCount = 0; 106 | break 107 | case 'py': 108 | lang = new PYTOKENS(); 109 | lineCount = 0; 110 | break 111 | default: 112 | lang = new CTOKENS(); 113 | lineCount = 0; 114 | } 115 | Start(options); 116 | } 117 | //appends the link tags back to head so that user can manipulate the properties of cspsh. 118 | links.forEach(link => { 119 | document.head.appendChild(link) 120 | }) 121 | 122 | //Copy to clipboard functionlity inside the HighLight() method 123 | const buttons = document.getElementsByClassName('copyVector') 124 | //Adds the copy to clipboard functionality to all the buttons 125 | for (let j = 0; j < buttons.length; j++) { 126 | const button = buttons[j]; 127 | button.addEventListener('click', function () { 128 | //get the innertext of #code element i.e the code to be copied 129 | const clipboardText = button.parentElement.parentElement.lastChild.innerText 130 | const copiedSvg = button.children[0]; 131 | //copy the code to clipboard 132 | navigator.clipboard.writeText(clipboardText) 133 | //change the svg to tick mark indicating that the code is copied 134 | copiedSvg.innerHTML = `` 136 | //wait for 0.5s (500ms) and revert back to the original svg 137 | setTimeout(function () { 138 | copiedSvg.innerHTML = copySvg 139 | }, 500) 140 | }) 141 | } 142 | //End of copy to clipboard functionality 143 | const retroEffects = document.getElementsByClassName('retro_effect'); 144 | [...retroEffects].forEach(retroEffect => { 145 | retroEffect.addEventListener('input', function () { 146 | const cspshHolder = retroEffect.parentElement.parentElement.parentElement.parentElement; 147 | cspshHolder.classList.toggle('retro') 148 | const retroInputSib = retroEffect.nextSibling 149 | const retroCircle = retroInputSib.firstChild 150 | if(retroEffect.checked){ 151 | retroInputSib.style.backgroundColor = "green" 152 | retroCircle.style.marginLeft = "1.8rem" 153 | }else{ 154 | retroInputSib.style.backgroundColor = "#dcdcdc" 155 | retroCircle.style.marginLeft = "0" 156 | } 157 | }) 158 | }) 159 | //start of theme changing 160 | const themeSelectors = document.getElementsByClassName("theme_selectors"); 161 | [...themeSelectors].forEach(themeSelector => { 162 | const theme = themeSelector.parentElement.parentElement.parentElement.getAttribute('theme'); 163 | [...themeSelector.options].forEach(option => { 164 | theme === option.value ? option.setAttribute('selected', 'true') : option.removeAttribute('selected'); 165 | }); 166 | themeSelector.addEventListener("change", changeData => { 167 | const theme = themeSelector.parentElement.parentElement.parentElement.getAttribute('theme'); 168 | [...themeSelector.options].forEach(option => { 169 | theme === option.value ? option.setAttribute('selected', 'true') : option.removeAttribute('selected'); 170 | }) 171 | themeSelector.parentElement.nextSibling.className = `themeusing${themeSelector.value}`; 172 | themeSelector.parentElement.parentElement.className = `copyHolder-${themeSelector.value}`; 173 | themeSelector.parentElement.parentElement.parentElement.classList.remove(theme.toUpperCase()); 174 | themeSelector.parentElement.parentElement.parentElement.classList.add(themeSelector.value.toUpperCase()); 175 | const cspshTags = [...themeSelector.parentElement.parentElement.parentElement.getElementsByTagName('cspsh')] 176 | const divs = [...themeSelector.parentElement.parentElement.parentElement.getElementsByTagName('div')] 177 | divs.forEach(div => { 178 | div.className = div.className.replaceAll(`${theme}`, `${themeSelector.value}`); 179 | }) 180 | cspshTags.forEach(cspsh => { 181 | if (cspsh.className.split('-')[0] === 'sh') 182 | cspsh.className = cspsh.className.replaceAll(`${theme}`, `${themeSelector.value}`); 183 | }) 184 | const lineHighlights = [...themeSelector.parentElement.parentElement.parentElement.lastChild.getElementsByClassName(`sh-${theme}-lineHighlight`)]; 185 | lineHighlights.forEach(lineHighlight => { 186 | lineHighlight.className = lineHighlight.className.replaceAll(`sh-${theme.toUpperCase()}-lineHighlight`, `sh-${themeSelector.value.toUpperCase()}-lineHighlight`); 187 | }) 188 | 189 | const lineCountHolder = themeSelector.parentElement.parentElement.parentElement.lastChild.getElementsByClassName('linecount-holder')[0] 190 | lineCountHolder.classList.remove(`lineCount-${theme.toUpperCase()}-done`) 191 | lineCountHolder.classList.add(`lineCount-${themeSelector.value.toUpperCase()}-done`) 192 | const mainHolder = themeSelector.parentElement.parentElement.parentElement; 193 | mainHolder.setAttribute('theme', themeSelector.value); 194 | themeSelector.parentElement.nextSibling.innerText = 'Current Theme: ' + themeSelector.value.toUpperCase() 195 | }) 196 | }) 197 | //end of theme changing 198 | //Build tabs if there are any 199 | BuildTabs(mode); 200 | //auto-scroll the linecount according to the scroll position of the code 201 | AutoScroll(); 202 | //add titles so when user hovers on the tokens it shows the token name 203 | AddTitles(); 204 | } catch (e) { 205 | codeHolder.lastChild.innerHTML += ` 206 |
!unable to highlight code due to some issue. 207 |

Here is the full details:

${e.stack.toString().split('\n').join('
')} 208 |
you can report the Error by clicking reporting an issue here:
209 | Report a bug
210 |

Please use the issue template provided while reporting an issue.

` 211 | } 212 | } 213 | 214 | nullOptions() { 215 | const options = { 216 | file: null, 217 | highlightLine: null, 218 | SourcePath: null, 219 | } 220 | 221 | return options 222 | } 223 | 224 | defaultOptions() { 225 | const options = { 226 | file: '', 227 | highlightLine: '', 228 | SourcePath: '/Source', 229 | } 230 | 231 | return options; 232 | } 233 | } 234 | 235 | function Start(options) { 236 | lineCount = 0 237 | codeAndLineCount = HighLight(SetParams(params), options) 238 | code = codeAndLineCount.code; 239 | lineCount = codeAndLineCount.lineCount 240 | lineCountHolder = document.getElementsByClassName(`lineCount-${theme.toUpperCase()}`)[0] 241 | tempClassName = lineCountHolder.className 242 | lineCountHolder.className = `linecount-holder lineCount-${theme.toUpperCase()}-done`; 243 | if (codeHolder.getAttribute('linecount') == 'true') 244 | DisplayLineCount(lineCountHolder, lineCount, options) 245 | else 246 | lineCountHolder.style.display = 'none' 247 | ReplaceDIVWithCode(codeHolder, code); 248 | if (codeHolder.getAttribute("mode") === "simple" && codeHolder.parentElement.className !== "cspshBuildTabs") { 249 | [...codeHolder.children].filter(child => child.className.includes("copyHolder"))[0].remove(); 250 | const breakpoints = [...codeHolder.children].filter(child => child.tagName === "BR") 251 | breakpoints.forEach(breakPoint => { 252 | breakPoint.remove(); 253 | }); 254 | codeHolder.classList.add("cspsh_simple_mode") 255 | codeHolder.getElementsByClassName("copyVector")[0].classList.add("simple_mode_copyVector") 256 | const copyVectorHolder = codeHolder.getElementsByClassName("copy_vector_holder")[0] 257 | copyVectorHolder.classList.add("simple_mode_copyVectorHolder") 258 | } 259 | code = null 260 | lineCount = null 261 | lang = null 262 | } 263 | 264 | //function to display line count id enabled 265 | function DisplayLineCount(lineCountHolder, lineCount, options) { 266 | lineCountHolder.innerHTML += '
' 267 | for (var line = 1; line <= lineCount; line++) { 268 | lineCountHolder.innerHTML += `${line}.
` 269 | } 270 | lineCountHolder.innerHTML += '
' 271 | return 272 | } 273 | 274 | //function to replace the div tag with the code tag. 275 | function ReplaceDIVWithCode(codeHolder, code) { 276 | codeHolder.children[5].innerHTML += `
${code.innerHTML}
` 277 | code.innerHTML = '' 278 | const codes = [...document.getElementsByClassName('code')] 279 | codes.forEach(code => { 280 | code.remove() 281 | }) 282 | } 283 | 284 | //function to auto-scroll the linecount according to the scroll position of the code 285 | function AutoScroll() { 286 | //get all the codes in the document 287 | const codes = document.getElementsByClassName('cspsh'); 288 | for (var i = 0; i < codes.length; i++) { 289 | const codeHolder = codes[i]; 290 | //get the linecount holder 291 | const lineCount = codeHolder.lastChild.children[0]; 292 | //add scroll event listener to the code holder (for #code) 293 | codeHolder.lastChild.children[1].addEventListener('scroll', scroll => { 294 | //set the scroll position of linecount to the same as the scroll position of the code 295 | lineCount.scrollTop = codeHolder.lastChild.children[1].scrollTop; 296 | }) 297 | } 298 | } 299 | 300 | function AddTitles() { 301 | const cspshTags = document.getElementsByTagName('cspsh'); 302 | for (var i = 0; i < cspshTags.length; i++) { 303 | const cspshTag = cspshTags[i]; 304 | if (cspshTag.className.split('-')[2]) 305 | cspshTag.title = cspshTag.className.split('-')[2]; 306 | else 307 | cspshTag.title = cspshTag.className.split('-')[1]; 308 | 309 | } 310 | } 311 | 312 | //function to set the parameters for other methods in the project 313 | function SetParams(params) { 314 | params = { 315 | codeHolder: codeHolder, 316 | codeContent: codeContent, 317 | openBraceCount: openBraceCount, 318 | fileName: fileName, 319 | isEOLINFOR: isEOLINFOR, 320 | forCount: forCount, 321 | lang: lang, 322 | theme: theme, 323 | tempStr: tempStr, 324 | copySvg: copySvg, 325 | lineCountHolder: lineCountHolder, 326 | lineCount: lineCount, 327 | code: code, 328 | } 329 | return params 330 | } -------------------------------------------------------------------------------- /Source/CSPSH/HighLight.js: -------------------------------------------------------------------------------- 1 | //importing SyntaxHighlight method from SyntaxHighlihght.js 2 | import { SyntaxHighlight } from './SyntaxHighlight.js' 3 | 4 | //main method which is splitted into sub methods with different fucntions or tasks 5 | function HighLight(params, options) { 6 | const lang = params.lang 7 | const codeLang = params.codeHolder.lang 8 | 9 | let tokens = [] 10 | let code = params.code 11 | let codeContent = params.codeContent 12 | let codeHolder = params.codeHolder 13 | let lineCount = params.lineCount 14 | let token = '' 15 | 16 | //splitting the content to seperate each character and symbol 17 | const characters = codeContent.split('') 18 | for (let i = 0; i < characters.length; i++) { 19 | const char = characters[i]; 20 | if (!(/[A-Za-z0-9]/).test(char)) { 21 | tokens.push(token.trim()); 22 | //adding the content untill there is \n for single line comments 23 | if (char === '/' && characters[i + 1] === '/') { 24 | for (i; i < characters.length; i++) { 25 | const char = characters[i]; 26 | if (char === '\n') { 27 | token += char; 28 | tokens.push(token.trim()); 29 | token = '' 30 | break; 31 | } else { 32 | token += char; 33 | } 34 | } 35 | } else if (char === '"' || char === "'" || char === '`') { 36 | //adding the content untill there is the corresponding closing quote for strings 37 | const stringCloser = char; 38 | token = char 39 | i++; 40 | for (i; i < characters.length; i++) { 41 | const char = characters[i]; 42 | if (char === stringCloser) { 43 | token += char; 44 | tokens.push(token.trim()); 45 | token = '' 46 | break; 47 | } else { 48 | if (char !== undefined) 49 | token += char; 50 | } 51 | } 52 | } else { 53 | tokens.push(char); 54 | token = ''; 55 | } 56 | } 57 | else { 58 | token += char; 59 | } 60 | } 61 | 62 | //resetting the content inside the element with class .CSPSH 63 | codeHolder.innerHTML = '' 64 | let replacedTokens = [] 65 | //filter empty tokens 66 | if (codeLang !== 'py') 67 | replacedTokens = tokens.filter(token => token !== ' ' && token !== '' && token !== '\t'); 68 | else 69 | [...tokens].forEach(token => { 70 | replacedTokens.push(token.replace(' ', ' ')) 71 | }) 72 | 73 | tokens = replacedTokens 74 | let optimisedTokens = [] 75 | let tempToken = '' 76 | 77 | tokens = tokens.filter(token => token !== '') 78 | //optimising the tokens to append the consecutive symbols like ++, --, +=, -=, etc. 79 | for (let i = 0; i < tokens.length; i++) { 80 | const token = tokens[i]; 81 | if (checkTernary(token) && checkTernary(tokens[i + 1])) { 82 | tempToken = token + tokens[i + 1]; 83 | i++; 84 | optimisedTokens.push(tempToken); 85 | } 86 | else { 87 | tempToken = token; 88 | optimisedTokens.push(tempToken); 89 | } 90 | } 91 | tokens = optimisedTokens; 92 | 93 | optimisedTokens = [] 94 | tempToken = '' 95 | //appending content for prepossor statements 96 | if (codeLang === 'c' || codeLang === 'cpp' || codeLang === 'css' || codeLang === "py") { 97 | for (let i = 0; i < tokens.length; i++) { 98 | const token = tokens[i]; 99 | const isCssSelector = (codeLang === 'css' && (token === '.' && !(/[0-9]/).test(tokens[i - 1]))) 100 | if ((token === '#' || isCssSelector) && tokens[i - 1] !== ':') { 101 | for (i; i < tokens.length; i++) { 102 | const token = tokens[i]; 103 | if (tokens[i + 1] === '>' || (codeLang === 'css' && tokens[i + 2] === '{') || (codeLang === 'py' && tokens[i + 2] === '\n')) { 104 | tempToken += token + tokens[i + 1]; 105 | optimisedTokens.push(tempToken); 106 | tempToken = ''; 107 | i++; 108 | break; 109 | } else { 110 | tempToken += token; 111 | } 112 | } 113 | } else { 114 | optimisedTokens.push(token); 115 | } 116 | } 117 | } else { 118 | optimisedTokens = tokens 119 | } 120 | //replacing < and > with < and > respectively to avoid conflict in browsers 121 | tokens = optimisedTokens.filter(token => token.replace('<', '<').replace('>', '>')) 122 | optimisedTokens = [] 123 | tempToken = ''; 124 | 125 | for (let i = 0; i < tokens.length; i++) { 126 | const token = tokens[i]; 127 | if (token === '/*') { 128 | for (i; i < tokens.length; i++) { 129 | const token = tokens[i]; 130 | if (tokens[i + 1] === '*/') { 131 | tempToken += token + tokens[i + 1]; 132 | optimisedTokens.push(tempToken); 133 | tempToken = ''; 134 | i++; 135 | break; 136 | } else { 137 | tempToken += token + ' '; 138 | } 139 | } 140 | } else { 141 | optimisedTokens.push(token); 142 | } 143 | } 144 | tokens = optimisedTokens 145 | let offset = 0 146 | 147 | if (codeLang === 'py') { 148 | let initialIndex = 0 149 | if (tokens[0] === '\n') { 150 | initialIndex = 1 151 | } 152 | for (let i = initialIndex; i < tokens.length; i++) { 153 | const token = tokens[i]; 154 | if (!(/[/ /]/).test(token[0])) { 155 | break 156 | } else { 157 | offset++ 158 | } 159 | } 160 | } 161 | optimisedTokens = [] 162 | for (let i = 0; i < tokens.length; i++) { 163 | const token = tokens[i] 164 | if (token === '\n') { 165 | i += offset 166 | } 167 | optimisedTokens.push(token) 168 | } 169 | 170 | tempToken = '' 171 | tokens = [] 172 | for (let i = 0; i < optimisedTokens.length; i++) { 173 | const opToken = optimisedTokens[i] 174 | if (opToken === ' ') { 175 | tempToken += opToken 176 | } else { 177 | tokens.push(tempToken) 178 | tokens.push(opToken) 179 | tempToken = '' 180 | } 181 | } 182 | 183 | tokens = tokens.filter(token => token !== '') 184 | 185 | let codeAndLineCount = SyntaxHighlight(tokens, params, lang, options); 186 | code = codeAndLineCount.code 187 | lineCount = codeAndLineCount.lineCount 188 | tokens = [] 189 | return codeAndLineCount 190 | } 191 | 192 | //method to check if the character is a symbol or not(used while checking for ternary operators) 193 | function checkTernary(char) { 194 | const symbols = ["-", "+", "<", "!", ">", "*", "=", "/"]; 195 | let isTernary = false; 196 | for (let i = 0; i < symbols.length; i++) { 197 | let symbol = symbols[i]; 198 | if (symbol === char) { 199 | isTernary = true; 200 | break; 201 | } else { 202 | isTernary = false; 203 | continue; 204 | } 205 | } 206 | 207 | return isTernary; 208 | } 209 | 210 | //export HighLight() function 211 | export { HighLight } -------------------------------------------------------------------------------- /Source/CSPSH/SyntaxHighlight.js: -------------------------------------------------------------------------------- 1 | //main fucntion that highlightes the js code 2 | function SyntaxHighlight(tokens, params, lang, options) { 3 | const KEYWORDS = lang.keywords 4 | const EOL = lang.EOL 5 | const UNARYOPERATORS = [] 6 | const TERNARYOPERATORS = lang.ternaryOperators 7 | const TYPES = lang.types 8 | const INDEX = lang.index 9 | const STRINGS = lang.string 10 | const INBUILT = lang.inBuilt 11 | const theme = params.theme 12 | const copySvg = params.copySvg 13 | const codeHolder = params.codeHolder 14 | const fileName = params.fileName 15 | const extension = params.codeHolder.lang 16 | 17 | let tempStr = params.tempStr 18 | let lineCountHolder = params.lineCountHolder 19 | let lineCount = params.lineCount 20 | let openBraceCount = params.openBraceCount 21 | let isEOLINFOR = params.isEOLINFOR 22 | let forCount = params.forCount 23 | let code = params.code 24 | let properties; 25 | let values; 26 | 27 | //Creating the TopBar section where we can see the file name, 28 | //copy to clipboard etc 29 | //adding the copy to clipboard button and svg 30 | codeHolder.innerHTML += ` 31 |
32 |
File Name: ${fileName}.${codeHolder.lang}
33 |
34 | Theme: 35 | 40 |
41 |
42 | 45 |
46 |
47 |



48 |
49 |
50 |
51 |
` 52 | 53 | let codeLang = codeHolder.lang 54 | if (codeLang == 'css') { 55 | properties = lang.properties 56 | values = lang.values 57 | } 58 | code = codeHolder.getElementsByClassName('code')[0] 59 | lineCountHolder = code.parentElement.getElementsByClassName(`lineCount-${theme.toUpperCase()}`)[0] 60 | //looping through each token for highlighting 61 | for (let i = 0; i < tokens.length; i++) { 62 | let token = tokens[i] 63 | if (codeLang === 'py') { 64 | if (token.startsWith(' ')) { 65 | GenerateCSPSHTag(code, extension, lineCount, token, params, theme, options.highlightLine, options.file, 'indentationGuidelines'); 66 | continue; 67 | } 68 | } 69 | if (token === undefined) continue; 70 | if (codeLang !== 'html') { 71 | if (token == '{') { 72 | openBraceCount++; 73 | } 74 | if (tokens[i + 1] == '}') { 75 | openBraceCount--; 76 | } 77 | } else { 78 | if (token == '<' && tokens[i + 1] !== '/') { 79 | openBraceCount++; 80 | code.innerHTML += `${token}`; 81 | continue; 82 | } 83 | if (tokens[i + 1] == '${token}` 90 | code.appendChild(document.createElement('br')); 91 | code.innerHTML += `${"    "}`.repeat(openBraceCount); 92 | lineCount++; 93 | continue; 94 | } else if (EOL.includes(token) && !EOL.includes(tokens[i + 1])) { 95 | code.innerHTML += `${token}` 96 | code.appendChild(document.createElement('br')); 97 | code.innerHTML += `${"    "}`.repeat(openBraceCount); 98 | lineCount++; 99 | i++; 100 | continue; 101 | } 102 | switch (token) { 103 | case KEYWORDS.includes(token) ? token : undefined: 104 | if (!(/[()\.[\],;<>]/).test(tokens[i + 1])) 105 | GenerateCSPSHTag(code, extension, lineCount, `${token} `, params, theme, options.highlightLine, options.file, 'keyword'); 106 | else 107 | GenerateCSPSHTag(code, extension, lineCount, `${token}`, params, theme, options.highlightLine, options.file, 'keyword'); 108 | break; 109 | case TYPES.includes(token) ? token : undefined: 110 | if (!(/[()\.[\],;<>]/).test(tokens[i + 1])) 111 | GenerateCSPSHTag(code, extension, lineCount, `${token} `, params, theme, options.highlightLine, options.file, 'type'); 112 | else 113 | GenerateCSPSHTag(code, extension, lineCount, `${token}`, params, theme, options.highlightLine, options.file, 'keyword'); 114 | break; 115 | case INDEX.includes(token) ? token : undefined: 116 | if (!(/[()\.[\],;<>]/).test(tokens[i + 1])) 117 | GenerateCSPSHTag(code, extension, lineCount, `${token} `, params, theme, options.highlightLine, options.file, 'operator'); 118 | else 119 | GenerateCSPSHTag(code, extension, lineCount, `${token}`, params, theme, options.highlightLine, options.file, 'operator'); 120 | break; 121 | case (token.includes('"') || token.includes("'") || token.includes('`')) ? token : undefined: 122 | if (!(/[()\.[\],;<>]/).test(tokens[i + 1])) 123 | GenerateCSPSHTag(code, extension, lineCount, `${token} `, params, theme, options.highlightLine, options.file, 'string'); 124 | else 125 | GenerateCSPSHTag(code, extension, lineCount, `${token}`, params, theme, options.highlightLine, options.file, 'string'); 126 | break; 127 | case INBUILT.includes(token) ? token : undefined: 128 | if (!(/[()\.[\],;<>]/).test(tokens[i + 1])) 129 | GenerateCSPSHTag(code, extension, lineCount, `${token} `, params, theme, options.highlightLine, options.file, 'inbuilt'); 130 | else 131 | GenerateCSPSHTag(code, extension, lineCount, `${token}`, params, theme, options.highlightLine, options.file, 'inbuilt'); 132 | break; 133 | case UNARYOPERATORS.includes(token) ? token : undefined: 134 | if (!(/[()\.[\],;<>]/).test(tokens[i + 1])) 135 | GenerateCSPSHTag(code, extension, lineCount, `${token} `, params, theme, options.highlightLine, options.file, 'operator'); 136 | else 137 | GenerateCSPSHTag(code, extension, lineCount, `${token}`, params, theme, options.highlightLine, options.file, 'operator'); 138 | break; 139 | case TERNARYOPERATORS.includes(token) ? token : undefined: 140 | if (!(/[()\.[\],;<>]/).test(tokens[i + 1])) 141 | GenerateCSPSHTag(code, extension, lineCount, ` ${token} `, params, theme, options.highlightLine, options.file, 'operator'); 142 | else 143 | GenerateCSPSHTag(code, extension, lineCount, `${token}`, params, theme, options.highlightLine, options.file, 'operator'); 144 | break; 145 | default: 146 | if (codeLang == 'css') { 147 | if (properties.includes(token)) { 148 | GenerateCSPSHTag(code, extension, lineCount, `${token}`, params, theme, options.highlightLine, options.file, 'property'); 149 | continue; 150 | } else if (values.includes(token)) { 151 | GenerateCSPSHTag(code, extension, lineCount, ` ${token}`, params, theme, options.highlightLine, options.file, 'value'); 152 | continue; 153 | } 154 | } 155 | if (token.startsWith('//') || token.startsWith('/*')) { 156 | GenerateCSPSHTag(code, extension, lineCount, `${token}`, params, theme, options.highlightLine, options.file, 'comment'); 157 | } 158 | else if (!(/[A-Za-z0-9]/).test(token)) { 159 | if (token === ']/).test(token)) { 164 | GenerateCSPSHTag(code, extension, lineCount, `${token} `, params, theme, options.highlightLine, options.file, 'operator'); 165 | } else 166 | GenerateCSPSHTag(code, extension, lineCount, `${token}`, params, theme, options.highlightLine, options.file, 'operator'); 167 | } 168 | else if (token.match(/^[0-9]+$/)) { 169 | if (!(/[()\.[\],;<>]/).test(tokens[i + 1])) 170 | GenerateCSPSHTag(code, extension, lineCount, `${token} `, params, theme, options.highlightLine, options.file, 'numeral'); 171 | else 172 | GenerateCSPSHTag(code, extension, lineCount, `${token}`, params, theme, options.highlightLine, options.file, 'numeral'); 173 | } 174 | else { 175 | if (token.includes('#')) { 176 | if (codeLang === 'css') { 177 | GenerateCSPSHTag(code, extension, lineCount, `${token}`, params, theme, options.highlightLine, options.file, 'idSelector'); 178 | continue; 179 | } 180 | if (codeLang === "py") { 181 | GenerateCSPSHTag(code, extension, lineCount, `${token}`, params, theme, options.highlightLine, options.file, 'comment'); 182 | continue; 183 | } 184 | GenerateCSPSHTag(code, extension, lineCount, `${token}`, params, theme, options.highlightLine, options.file, 'preprocess'); 185 | continue; 186 | } 187 | if (!(/[()\.[\],;<>]/).test(tokens[i + 1])) { 188 | if (codeLang === "css" && token.includes('.')) { 189 | GenerateCSPSHTag(code, extension, lineCount, `${token} `, params, theme, options.highlightLine, options.file, 'classSelector'); 190 | continue; 191 | } 192 | GenerateCSPSHTag(code, extension, lineCount, `${token} `, params, theme, options.highlightLine, options.file, 'variable'); 193 | } 194 | else { 195 | if (tokens[i + 1] === '(') 196 | GenerateCSPSHTag(code, extension, lineCount, `${token}`, params, theme, options.highlightLine, options.file, 'Func'); 197 | else { 198 | if (tokens[i - 1] === '#') { 199 | GenerateCSPSHTag(code, extension, lineCount, `${token}`, params, theme, options.highlightLine, options.file, 'cssColor'); 200 | continue; 201 | } 202 | GenerateCSPSHTag(code, extension, lineCount, `${token}`, params, theme, options.highlightLine, options.file, 'variable'); 203 | } 204 | } 205 | } 206 | 207 | } 208 | } 209 | 210 | const codeAndLineCount = { 211 | code: code, 212 | lineCount: lineCount 213 | } 214 | //return the updated code element 215 | return codeAndLineCount 216 | } // end of the main js highlighting function 217 | 218 | function GenerateCSPSHTag(code, extension, lineCount, token, params, theme, highlightLines, files, tokenType) { 219 | let cspshTag = document.createElement('cspsh'); 220 | const fileName = params.fileName 221 | const codeLang = params.codeHolder.lang 222 | if (codeLang === 'css' && token.trim() !== ':') { 223 | token = token.trim(); 224 | } 225 | const FileAndLinehighlight = new Map(); 226 | [...files].forEach((file, i) => { 227 | FileAndLinehighlight.set(file, highlightLines[i]) 228 | }); 229 | const lines = FileAndLinehighlight.get(`${fileName}.${extension}`) 230 | if(lines && lines.includes(lineCount)){ 231 | cspshTag.className += `sh-${theme}-${tokenType} sh-${theme.toUpperCase()}-lineHighlight` 232 | }else{ 233 | cspshTag.className = `sh-${theme}-${tokenType}`; 234 | } 235 | if (codeLang === 'py' && (/[a-zA-Z0-9-\./|?!@#$%^&*()_+={}[\]~`:;"'<,>]/).test(token)) { 236 | token = token.trim() 237 | } 238 | if (codeLang === 'py') 239 | cspshTag.innerHTML = token.replace(/ /g, ' ').trim(); 240 | else 241 | cspshTag.innerText = token; 242 | code.appendChild(cspshTag); 243 | } 244 | 245 | //exorting SyntaxHighlight method 246 | export { SyntaxHighlight } -------------------------------------------------------------------------------- /Source/CSPSH/TabBuilder.js: -------------------------------------------------------------------------------- 1 | //function to build tabs for the defined codes using as an attribute 2 | //This method will build tabs inside the wrapper defined by the user using 3 | function BuildTabs() { 4 | //Get all the tabWrapper elements 5 | const wrappers = document.getElementsByClassName('cspshBuildTabs'); 6 | for (var i = 0; i < wrappers.length; i++) { 7 | //creating a tab button holder to append all the buttons that indicate the respective tab 8 | const tabChangersWrapper = document.createElement('div'); 9 | const wrapper = wrappers[i]; 10 | const codes = wrapper.getElementsByClassName('CSPSH'); 11 | for (var j = 0; j < codes.length; j++) { 12 | const code = codes[j]; 13 | const tabName = code.getAttribute('name') + '.' + code.lang; 14 | const changeTab = document.createElement('div'); 15 | changeTab.classList.add('cspshChangeTab'); 16 | //setting tab name to the file name provided by the user 17 | changeTab.innerHTML = tabName; 18 | //appending the tab to the div element(tab buttons holder) 19 | tabChangersWrapper.appendChild(changeTab) 20 | } 21 | tabChangersWrapper.className = 'tabChangersWrapper'; 22 | //appending the tab buttons holder to the wrapper 23 | wrapper.appendChild(tabChangersWrapper) 24 | } 25 | 26 | //get all the tab changers(buttons) to add event listeners 27 | const tabChangers = document.getElementsByClassName('cspshChangeTab'); 28 | const tabWrappers = [...document.getElementsByClassName('tabChangersWrapper')]; 29 | tabWrappers.forEach(tabWrapper => { 30 | //set the z-index of first code to max so it can be viewed first and change the styling of respective button to indicate the selected tab. 31 | tabWrapper.parentElement.children[0].style.zIndex = 10 32 | tabWrapper.firstChild.classList.add('activeTab') 33 | }) 34 | 35 | //add event listeners to the tab changers 36 | for (var l = 0; l < tabChangers.length; l++) { 37 | const changeTab = tabChangers[l]; 38 | changeTab.addEventListener('click', function (clicked) { 39 | const codes = [...clicked.composedPath()[2].getElementsByClassName('cspsh')]; 40 | const clickedButton = clicked.composedPath()[0]; 41 | const parentOfClicked = clickedButton.parentElement; 42 | [...parentOfClicked.children].forEach(button => { 43 | //toggle the style to indicate the selected tab(currently viewing tab). 44 | if (button != clickedButton) { 45 | button.classList.add('inactiveTab') 46 | button.classList.remove('activeTab') 47 | } else { 48 | button.classList.add('activeTab') 49 | button.classList.remove('inactiveTab') 50 | } 51 | }) 52 | //set the z-index of the selected tab to max so it can be viewed. 53 | for (var k = 0; k < codes.length; k++) { 54 | const codeInside = codes[k]; 55 | if (codeInside.getAttribute('name') + '.' + codeInside.lang == this.innerHTML) { 56 | codeInside.style.zIndex = '10'; 57 | } else { 58 | codeInside.style.zIndex = '0'; 59 | } 60 | } 61 | }) 62 | } 63 | } 64 | 65 | export { BuildTabs }; -------------------------------------------------------------------------------- /Source/LangTokens/CSPSHC.js: -------------------------------------------------------------------------------- 1 | class CTOKENS { 2 | constructor() { 3 | this.keywords = ['for', 'while', 4 | 'break', 'goto', 'if', 5 | 'continue', 'switch', 6 | 'else', 'return', 7 | 'do'] 8 | this.operators = ['=', '+', '-', '*', '/', '.', ',', '<', '>'] 9 | 10 | this.EOL = [';', '\n'] 11 | this.unaryOperators = [] 12 | this.ternaryOperators = ['!=', '<=', '>=', '==', '++', '--'] 13 | this.types = [ 14 | 'auto', 'extern', 'short', 'float', 'signed', '_Alignas', 15 | 'case', 'sizeof', '_Alignof', 16 | 'char', 'static', '_Atomic', 17 | 'const', 'struct', '_Bool', 'inline', '_Complex', 18 | 'default', 'int', 'typedef', '_Generic', 'long', 'union', '_Imaginary', 19 | 'double', 'register', 'unsigned', '_Noreturn', 'restrict', 'void', '_Static_assert', 20 | 'enum', 'volatile', '_Thread_local' 21 | ] 22 | this.func = ['(', ')'] 23 | this.index = ['[', ']'] 24 | this.curlyBraces = ['{', '}'] 25 | this.string = ['"', "'"] 26 | this.inBuilt = [ 27 | 'printf', 'scanf', 'abort', 'abs', 28 | 'acos', 'asctime', 'asctime_r', 'asin', 'assert', 29 | 'atan2', 'atexit', 'atof', 'atoi', 'atan', 'atol', 30 | 'bsearch', 'btowc', 'calloc', 'catclose', 'gets', 'puts', 31 | 'getchar', 'getc', 'fopen', 'fclose', 'strcat', 'strchr', 32 | 'strcmp', 'sscanf', 'strcpy', 'strlen' 33 | ] 34 | } 35 | } 36 | export { CTOKENS } -------------------------------------------------------------------------------- /Source/LangTokens/CSPSHCPP.js: -------------------------------------------------------------------------------- 1 | //still in dev 2 | 3 | class CPPTOKENS { 4 | constructor() { 5 | this.keywords = ['new', 'undefined', 'null', 'if', 'for', 'continue', 'break', 'switch', 'case', 'else', 'return', 6 | 'do', 'while', 'public', 'private', 'void', 'using', 'namespace'] 7 | this.operators = ['=', '+', '-', '*', '/', '.', ',', '<', '>',':', '::'] 8 | 9 | this.EOL = [';', '\n'] 10 | this.unaryOperators = [] 11 | this.ternaryOperators = ['!=', '<=', '>=', '==', '++', '--', '>>', '<<'] 12 | this.types = ['class', 'int', 'float', 'char', 'string'] 13 | this.func = ['(', ')'] 14 | this.index = ['[', ']'] 15 | this.curlyBraces = ['{', '}'] 16 | this.string = ['"', "'", '`'] 17 | this.inBuilt = ['cout'] 18 | } 19 | } 20 | export { CPPTOKENS } -------------------------------------------------------------------------------- /Source/LangTokens/CSPSHCSS.js: -------------------------------------------------------------------------------- 1 | class CSSTOKENS { 2 | constructor() { 3 | this.keywords = ['@charset', '@import', '@namespace', 4 | '@font-face', '@keyframes', '@media', '@page', 5 | '@supports', '@viewport', '@-ms-viewport', 6 | '@-webkit-viewport', '@-moz-viewport', 7 | '@-o-viewport', '@-webkit-keyframes', 8 | '@-moz-keyframes', '@-o-keyframes', 9 | '@-ms-keyframes', '@-webkit-font-face', 10 | '@-moz-font-face', '@-o-font-face', '@-ms-font-face', 11 | '@-webkit-document', '@-moz-document', '@-o-document', 12 | '@-ms-document', '@-webkit-view', '@-moz-view', 13 | '@-o-view', '@-ms-view', '@-webkit-region', 14 | '@-moz-region', '@-o-region', '@-ms-region', 15 | '@-webkit-grammar', '@-moz-grammar', '@-o-grammar', 16 | '@-ms-grammar', '@-webkit-mask', '@-moz-mask', 17 | '@-o-mask', '@-ms-mask', '@-webkit-mask-image', 18 | '@-moz-mask-image', '@-o-mask-image', '@-ms-mask-image', 19 | '@-webkit-mask-attachment', '@-moz-mask-attachment', 20 | '@-o-mask-attachment', '@-ms-mask-attachment', 21 | '@-webkit-mask-position', '@-moz-mask-position', 22 | '@-o-mask-position', '@-ms-mask-position', 23 | '@-webkit-mask-repeat', '@-moz-mask-repeat', 24 | '@-o-mask-repeat', '@-ms-mask-repeat', 25 | '@-webkit-mask-clip', '@-moz-mask-clip', 26 | '@-o-mask-clip', '@-ms-mask-clip', '@-webkit-mask-origin', '@-moz-mask' 27 | ] 28 | this.operators = [':', '::', '.'] 29 | this.EOL = [';', '\n'] 30 | this.unaryOperators = [] 31 | this.ternaryOperators = [] 32 | this.types = ['input', 'body', 'span', 'div'] 33 | this.func = ['(', ')'] 34 | this.index = ['[', ']'] 35 | this.curlyBraces = ['{', '}'] 36 | this.string = ['"', "'"] 37 | this.inBuilt = ['attr', 'calc'] 38 | this.properties=[ 39 | 'background','background-color', 'color', 'max-width', 'width', 'height', 40 | 'display', 'align', 'justify', 'flex-direction', 41 | 'flex-wrap', 'flex-flow', 'flex-basis', 'flex-grow', 42 | 'flex-shrink', 'flex-wrap', 'flex-flow', 'flex-basis', 43 | 'flex-grow', 'flex-shrink', 'flex-wrap', 'flex-flow', 44 | 'flex-basis', 'flex-grow', 'flex-shrink', 'flex-wrap', 45 | 'flex-flow', 'flex-basis', 'flex-grow', 'flex-shrink', 46 | 'border', 'border-width', 'border-style', 'border-color', 47 | 'border-radius', 'border-top', 'border-right', 'border-bottom', 48 | 'border-left', 'border-top-width', 'border-right-width', 49 | 'border-bottom-width', 'border-left-width', 'border-top-style', 50 | 'margin', 'margin-top', 'margin-right', 'margin-bottom', 51 | 'margin-left', 'padding', 'padding-top', 'padding-right', 52 | 'padding-bottom', 'padding-left', 'outline', 'outline-width', 53 | 'outline-style', 'outline-color', 'outline-offset', 54 | 'outline-top', 'outline-right', 'outline-bottom', 55 | 'font', 'font-family', 'font-size', 'font-style', 'font-weight', 56 | 'font-variant', 'font-stretch', 'font-size-adjust', 57 | 'font-kerning', 'font-smoothing', 'font-feature-settings', 58 | 'font-variant-caps', 'font-variant-numeric', 'red', 'blue', 'green', 59 | ] 60 | this.values = [ 61 | 'flex', 'grid', 'screen', 'solid' 62 | ] 63 | } 64 | } 65 | 66 | export { CSSTOKENS } -------------------------------------------------------------------------------- /Source/LangTokens/CSPSHHTML.js: -------------------------------------------------------------------------------- 1 | class HTMLTOKENS { 2 | constructor() { 3 | this.keywords = ['html', 'head', 'title', 'body', 'div', 'span', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 4 | 'a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'blockquote', 5 | 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 6 | 'del', 'details', 'dfn', 'dialog', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 7 | 'footer', 'form', 'hgroup', 'hr', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 8 | 'li', 'link', 'main', 'map', 'mark', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 9 | 'option', 'output', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 10 | 'script', 'section', 'select', 'small', 'source', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 11 | 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 12 | 'ul', 'var', 'video', 'wbr', 'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 13 | 'meta', 'param', 'source', 'track', 'wbr', 'command', 'keygen', 'menuitem'] 14 | this.operators = ['/', '<', '>', '='] 15 | this.EOL = ['\n'] 16 | this.unaryOperators = [] 17 | this.ternaryOperators = [] 18 | this.types = [] 19 | this.func = ['(', ')'] 20 | this.index = [] 21 | this.curlyBraces = [] 22 | this.string = ['"', "'", '`'] 23 | this.inBuilt = ['id', 'class', 'type', 'rel', 'src', 'lang', 'theme', 'linecount', 'download', 24 | 'href', 'style', 'title', 'alt', 'width', 'height', 'name', 'value', 'placeholder', 'required', 25 | 'disabled', 'readonly', 'checked', 'selected', 'multiple', 'autocomplete', 'autofocus', 'pattern', 26 | 'min', 'max', 'step', 'rows', 'cols', 'wrap', 'for', 'label', 'target', 'hidden', 'onclick', 27 | 'ondblclick', 'onmousedown', 'onmousemove', 'onmouseout', 'onmouseover', 'onmouseup', 'onkeydown', 28 | 'onkeypress', 'onkeyup', 'onabort', 'onbeforeunload', 'onerror', 'onhashchange', 'onload', 29 | 'onpageshow', 'onpagehide', 'onresize', 'onscroll', 'onunload', 'onblur', 'onchange', 'onfocus' 30 | ] 31 | } 32 | } 33 | 34 | export { HTMLTOKENS } -------------------------------------------------------------------------------- /Source/LangTokens/CSPSHJAVA.js: -------------------------------------------------------------------------------- 1 | //still in dev 2 | 3 | class JAVATOKENS { 4 | constructor() { 5 | this.keywords = ['for', 'while', 6 | 'break', 'goto', 'if', 7 | 'continue', 'switch', 'case', 8 | 'else', 'return', 9 | 'do', 'abstract', 'assert', 'catch', 'try', 'extends', 'finally', 10 | 'implements', 'import', 'instanceof', 'interface', 'native', 'new', 11 | 'package', 'private', 'protected', 'public', 'static', 'strictfp', 'super', 12 | 'synchronized', 'this', 'throw', 'throws', 'volatile', 'default', 'void'] 13 | this.operators = ['=', '+', '-', '*', '/', '.', ',', '<', '>', ':'] 14 | 15 | this.EOL = [';', '\n'] 16 | this.unaryOperators = [] 17 | this.ternaryOperators = ['!=', '<=', '>=', '==', '++', '--'] 18 | this.types = [ 19 | 'const', 'transient', 'int', 'float', 'char', 'long', 'double', 'byte', 'enum', 'null', 'short', 'class' 20 | ] 21 | this.func = ['(', ')'] 22 | this.index = ['[', ']'] 23 | this.curlyBraces = ['{', '}'] 24 | this.string = ['"', "'"] 25 | this.inBuilt = ['System', 'String', 'Scanner'] 26 | } 27 | } 28 | export { JAVATOKENS } -------------------------------------------------------------------------------- /Source/LangTokens/CSPSHJS.js: -------------------------------------------------------------------------------- 1 | class JSTOKENS { 2 | constructor() { 3 | this.keywords = ['new', 'undefined', 'null', 'if', 'for', 'continue', 'break', 'switch', 'case', 'else', 'return', 4 | 'do', 'while', 'void', 'export', 'import', 'async', 'await', 5 | 'return', 'try' 6 | ] 7 | this.operators = ['=', '+', '-', '*', '/', '.', ',', '<', '>', ':'] 8 | this.EOL = [';', '\n'] 9 | this.unaryOperators = [] 10 | this.ternaryOperators = ['!=', '<=', '>=', '==', '++', '--', '==='] 11 | this.types = ['var', 'const', 'let', 'function', 'class', 'constructor'] 12 | this.func = ['(', ')'] 13 | this.index = ['[', ']'] 14 | this.curlyBraces = ['{', '}'] 15 | this.string = ['"', "'", '`'] 16 | this.inBuilt = ['console', 'this'] 17 | } 18 | } 19 | export { JSTOKENS } -------------------------------------------------------------------------------- /Source/LangTokens/CSPSHPY.js: -------------------------------------------------------------------------------- 1 | class PYTOKENS { 2 | constructor() { 3 | this.keywords = ['import', 'from', 'as', 'def', 'class', 'return', 'if', 'else', 4 | 'elif', 'for', 'in', 'while', 'break', 'continue', 'pass', 'try', 'except', 5 | 'finally', 'raise', 'assert', 'with', 'yield', 'lambda', 'del', 'nonlocal', 6 | 'global', 'async', 'await', 'print', 'input', 'open', 'range', 'len', 'str', 7 | 'int', 'float', 'bool', 'list', 'dict', 'set', 'tuple', 'frozenset', 'enumerate', 8 | 'zip', 'reversed', 'sorted', 'sum', 'max', 'min', 'any', 'all', 'abs', 'round', 'pow', 9 | 'map', 'filter', 'reduce', 'isinstance', 'issubclass', 'super', 'type', 'dir', 'vars', 10 | 'locals', 'globals', 'hasattr', 'getattr', 'setattr', 'delattr', 'property', 'object', 'Exception'], 11 | this.operators = ['=', '+', '-', '*', '/', '.', ',', '<', '>', ':', '%', '&', '|', '^', '~', '!', '?', '@', '#', '$'] 12 | this.EOL = [';', '\n'] 13 | this.unaryOperators = [] 14 | this.ternaryOperators = ['!=', '<=', '>=', '==', '++', '--', '==='] 15 | this.types = ['str', 'int', 'float', 'bool', 'list', 'dict', 'set', 'tuple', 'frozenset'] 16 | this.func = ['(', ')'] 17 | this.string = ['"', "'", '`'] 18 | this.index = ['[', ']'] 19 | this.inBuilt = ['print', 'input', 'open', 'range', 'len', 'str', 'int', 20 | 'float', 'bool', 'list', 'dict', 'set', 'tuple', 'frozenset', 'enumerate', 21 | 'zip', 'reversed', 'sorted', 'sum', 'max', 'min', 'any', 'all', 'abs', 'round', 22 | 'pow', 'map', 'filter', 'reduce', 'isinstance', 'issubclass', 'super', 'type', 23 | 'dir', 'vars', 'locals', 'globals', 'hasattr', 'getattr', 'setattr', 'delattr', 24 | 'property', 'object', 'Exception'] 25 | } 26 | } 27 | 28 | export { PYTOKENS } -------------------------------------------------------------------------------- /Source/LangTokens/CSPSHSS.js: -------------------------------------------------------------------------------- 1 | class SSTOKENS { 2 | constructor() { 3 | this.types = ['int', 'float', 'string', 'dynamic', 'Action', 'void'] 4 | this.keywords = ['lambda', 'if', 'else', 'switch', 'case', 'then', 'end', 'BREAKPOINT', 'func', 'import' 5 | , 'new', 'undefined', 'null', 'if', 'for', 'continue', 'break', 'switch', 'case', 'else', 'return'] 6 | this.operators = ['=', '+', '-', '*', '/', '.', ',', '<', '>'] 7 | this.inBuilt = ['print', 'input'] 8 | this.EOL = [';', '\n'] 9 | this.unaryOperators = ['=>'] 10 | this.ternaryOperators = ['!=', '<=', '>=', '==', '++', '--'] 11 | this.func = ['(', ')'] 12 | this.index = ['[', ']'] 13 | this.curlyBraces = ['{', '}'] 14 | this.string = ['"', "'"] 15 | this.inBuilt = [] 16 | } 17 | } 18 | 19 | export {SSTOKENS} -------------------------------------------------------------------------------- /Source/ThemeStyles/CSPSHDARK.css: -------------------------------------------------------------------------------- 1 | div.cspsh { 2 | display: inline-block; 3 | } 4 | 5 | /*CSPSH class the whole code block*/ 6 | .CSPSH { 7 | background-color: #2a252e; 8 | color: #60556a; 9 | overflow: hidden; 10 | font-size: 16px; 11 | font-family: 'Ubuntu Mono', monospace; 12 | border-radius: 6px; 13 | padding: 1%; 14 | float: left; 15 | height: 50vh; 16 | width: 80vw; 17 | margin: 1%; 18 | line-height: 2.5vh; 19 | text-justify: left; 20 | text-align: left; 21 | z-index: 6; 22 | } 23 | 24 | /*Styling the topBar*/ 25 | .copyHolder-CSPSH { 26 | background-color: rgba(42, 37, 46, 0.577); 27 | color: rgb(202, 202, 202); 28 | backdrop-filter: blur(18px); 29 | font-family: 'Roboto', sans-serif; 30 | padding: 1%; 31 | margin: -1%; 32 | height: 6vh; 33 | border-top-right-radius: 6px; 34 | border-top-left-radius: 6px; 35 | width: inherit; 36 | position: absolute; 37 | display: flex; 38 | align-content: center; 39 | justify-content: space-evenly; 40 | align-items: center; 41 | transition: 0.4s ease-in-out; 42 | } 43 | 44 | .lineCount-CSPSH-done { 45 | overflow: hidden; 46 | height: 44vh; 47 | line-height: 2.5vh; 48 | padding-right: .5rem; 49 | color: rgb(152, 136, 167); 50 | border-right: 4px solid rgb(166, 148, 183); 51 | } 52 | 53 | .sh-CSPSH-lineHighlight { 54 | border-top: 1px solid rgb(152, 136, 167); 55 | border-bottom: 1px solid rgb(152, 136, 167); 56 | background-color: rgba(77, 69, 85, 0.414); 57 | } 58 | 59 | #code { 60 | height: 44vh; 61 | white-space: nowrap; 62 | width: 77vw; 63 | overflow: hidden; 64 | margin-left: 1rem; 65 | } 66 | 67 | #code cspsh { 68 | transition: 0.4s ease-in-out; 69 | } 70 | 71 | #code:hover { 72 | overflow: scroll; 73 | } 74 | 75 | .cspsh_simple_mode, 76 | .cspsh_simple_mode #code { 77 | width: auto; 78 | height: auto; 79 | margin-left: 0; 80 | overflow-x: hidden; 81 | } 82 | 83 | .copyVector { 84 | z-index: 5; 85 | height: auto; 86 | width: auto; 87 | padding: 4px; 88 | background-color: rgb(59, 59, 59, 0.3); 89 | border: none; 90 | border-radius: 6px; 91 | position: absolute; 92 | } 93 | 94 | .simple_mode_copyVectorHolder { 95 | width: 100%; 96 | height: auto; 97 | display: flex; 98 | justify-content: flex-end; 99 | } 100 | 101 | .simple_mode_copyVector { 102 | opacity: .3; 103 | } 104 | 105 | .simple_mode_copyVector:hover { 106 | opacity: 1; 107 | } 108 | 109 | #blackLine, 110 | #greyLine { 111 | transition: 0.4s; 112 | } 113 | 114 | .CSPSHsvg:hover>#blackLine { 115 | cursor: pointer; 116 | fill: rgb(49, 49, 49); 117 | stroke: rgb(49, 49, 49); 118 | transition: 0.4s; 119 | } 120 | 121 | .CSPSHsvg:hover>#greyLine { 122 | cursor: pointer; 123 | fill: rgb(167, 167, 167); 124 | stroke: rgb(167, 167, 167); 125 | transition: 0.4s; 126 | } 127 | 128 | #code::-webkit-scrollbar { 129 | background-color: transparent; 130 | border-radius: 0px 6px 6px 0px; 131 | width: 0.08rem; 132 | height: 0.5rem; 133 | } 134 | 135 | #code::-webkit-scrollbar-thumb { 136 | background-color: rgb(146, 143, 143); 137 | width: 0.1rem; 138 | border-radius: 6px 6px 6px 6px; 139 | } 140 | 141 | #code::-webkit-scrollbar-button { 142 | display: none; 143 | } 144 | 145 | .cspsh-indentationGuidelines { 146 | border-left: 1px solid grey; 147 | } 148 | 149 | .changeTheme { 150 | margin: 1rem; 151 | color: #dddddd; 152 | } 153 | 154 | .changeTheme select { 155 | background-color: inherit; 156 | padding: .5rem; 157 | color: #d6d6d6; 158 | border: none; 159 | border-radius: .5rem; 160 | font-size: 12pt; 161 | } 162 | 163 | .changeTheme select option { 164 | background-color: #2a252e; 165 | } 166 | 167 | .changeTheme select:hover { 168 | cursor: pointer; 169 | } 170 | 171 | .retro { 172 | filter: blur(0.5px) brightness(1.5) contrast(1.2); 173 | text-shadow: 0 0 2px #fff; 174 | 175 | } 176 | 177 | .retro::before { 178 | content: ""; 179 | position: absolute; 180 | margin: -1%; 181 | border-radius: inherit; 182 | padding: 1%; 183 | width: inherit; 184 | height: inherit; 185 | background: repeating-linear-gradient(rgba(0, 0, 0, 0.351), 186 | rgba(0, 0, 0, 0.315) 2px, 187 | transparent 2px, 188 | transparent 3px); 189 | } 190 | 191 | .retro_effect{ 192 | opacity: 0; 193 | } 194 | 195 | .customCheckbox { 196 | height: 1.2rem; 197 | width: 3rem; 198 | border-radius: 5rem; 199 | display: block; 200 | background-color: #dcdcdc; 201 | border: .1rem solid #dcdcdc; 202 | transition: .2s ease-in-out; 203 | } 204 | 205 | .customCheckbox{ 206 | transition: .2s ease-in-out; 207 | } 208 | 209 | #circle { 210 | height: 1.2rem; 211 | width: 1.2rem; 212 | border-radius: 50%; 213 | background-color: #ffffff; 214 | display: block; 215 | transition: .2s ease-in-out; 216 | } 217 | 218 | .retro::selection { 219 | background: #0080FF; 220 | text-shadow: none; 221 | } 222 | 223 | .cspshBuildTabs .CSPSH { 224 | position: absolute; 225 | margin-top: 2rem; 226 | } 227 | 228 | .cspshBuildTabs { 229 | height: 60vh; 230 | position: relative; 231 | display: block; 232 | } 233 | 234 | .tabChangersWrapper { 235 | width: 80vw; 236 | margin-left: 1rem; 237 | position: absolute; 238 | display: flex; 239 | overflow-x: scroll; 240 | } 241 | 242 | #viewer_wrapper { 243 | display: flex; 244 | } 245 | 246 | .cspshChangeTab { 247 | padding: 0.5rem; 248 | background-color: rgba(114, 114, 114, 0.61); 249 | color: rgb(184, 184, 184); 250 | border: none; 251 | border-radius: 6px; 252 | backdrop-filter: blur(24px); 253 | margin: 0.2rem; 254 | font-size: 14px; 255 | font-family: monospace; 256 | } 257 | 258 | .cspshChangeTab:hover { 259 | color: rgb(255, 255, 255); 260 | background-color: rgb(53, 53, 53); 261 | cursor: pointer; 262 | } 263 | 264 | .inactiveTab { 265 | color: rgb(184, 184, 184); 266 | background-color: rgb(114, 114, 114, 0.61); 267 | border: none; 268 | } 269 | 270 | .activeTab { 271 | background-color: rgba(70, 70, 70, 0.61); 272 | border: 1px solid orange; 273 | } 274 | 275 | #CSPSH-errorMessage { 276 | height: 50vh; 277 | width: 80vh; 278 | position: relative; 279 | overflow-y: auto; 280 | background-color: rgba(39, 39, 39, 0.61); 281 | backdrop-filter: blur(8px); 282 | z-index: 20; 283 | color: rgb(255, 146, 146); 284 | line-height: 3.5vh; 285 | } 286 | 287 | .cspsh a { 288 | color: rgb(118, 164, 221); 289 | text-decoration: none; 290 | } 291 | 292 | .cspsh a:hover { 293 | text-decoration: underline; 294 | } 295 | 296 | /*End of the top bar css*/ 297 | /* css for types */ 298 | .sh-CSPSH-type { 299 | color: #ff5353; 300 | } 301 | 302 | /* css for keywords */ 303 | .sh-CSPSH-keyword { 304 | color: #ffa76d; 305 | } 306 | 307 | /* css for variables */ 308 | .sh-CSPSH-variable { 309 | color: #6277ff; 310 | } 311 | 312 | /* css for class */ 313 | .sh-CSPSH-class { 314 | color: #fa5cff; 315 | } 316 | 317 | /* css for operators */ 318 | .sh-CSPSH-operator { 319 | color: #EDEDED; 320 | } 321 | 322 | /* css for strings and characters */ 323 | .sh-CSPSH-string { 324 | color: #baff67; 325 | } 326 | 327 | /* css for numerals */ 328 | .sh-CSPSH-numeral, 329 | .sh-CSPSH-cssColor { 330 | color: #5efffc; 331 | } 332 | 333 | /* css for functions */ 334 | .sh-CSPSH-Func { 335 | color: #ffca61; 336 | } 337 | 338 | /* css for comments */ 339 | .sh-CSPSH-comment { 340 | color: #646464; 341 | font-style: italic; 342 | } 343 | 344 | /* css for inbuilt fucntions */ 345 | .sh-CSPSH-inBuilt { 346 | color: #ff60a5; 347 | font-style: italic; 348 | } 349 | 350 | .sh-CSPSH-preprocess { 351 | color: #F6F6F6; 352 | background-color: rgb(66, 59, 72); 353 | padding: 2px; 354 | } 355 | 356 | .sh-CSPSH-classSelector, 357 | .sh-CSPSH-idSelector { 358 | color: greenyellow; 359 | } 360 | 361 | .sh-CSPSH-property { 362 | color: rgb(206, 123, 255); 363 | } 364 | 365 | .cspsh[lang="html"] .sh-CSPSH-variable { 366 | color: #d6d6d6; 367 | } 368 | 369 | @media screen and (max-width: 900px) { 370 | .changeTheme { 371 | display: none; 372 | } 373 | 374 | .cspsh_simple_mode, 375 | .cspsh_simple_mode #code { 376 | width: auto; 377 | max-width: 100%; 378 | overflow-x: auto; 379 | } 380 | } -------------------------------------------------------------------------------- /Source/ThemeStyles/DRAKULADARK.css: -------------------------------------------------------------------------------- 1 | .DRAKULA { 2 | background-color: #282a36; 3 | color: #f8f8f2; 4 | } 5 | 6 | /*Styling the topBar*/ 7 | .copyHolder-DRAKULA { 8 | color: rgb(202, 202, 202); 9 | background-color: rgba(40, 42, 54, 0.66); 10 | backdrop-filter: blur(18px); 11 | font-family: 'Roboto', sans-serif; 12 | padding: 1%; 13 | margin: -1%; 14 | height: 6vh; 15 | border-top-right-radius: 6px; 16 | border-top-left-radius: 6px; 17 | width: inherit; 18 | align-items: right; 19 | text-align: center; 20 | text-justify: center; 21 | position: absolute; 22 | display: flex; 23 | align-content: center; 24 | justify-content: space-evenly; 25 | align-items: center; 26 | } 27 | 28 | .lineCount-DRAKULA-done { 29 | overflow: hidden; 30 | height: 44vh; 31 | line-height: 2.5vh; 32 | color: #8890bd; 33 | padding-right: .5rem; 34 | border-right: 4px solid #8890bd; 35 | } 36 | 37 | .sh-DRAKULA-lineHighlight { 38 | border-top: 1px solid #7e86bd; 39 | border-bottom: 1px solid #7e86bd; 40 | background-color: #7e86bd5b; 41 | } 42 | 43 | /*End of the top bar css*/ 44 | /* css for types */ 45 | .sh-DRAKULA-type { 46 | color: #ff79c6; 47 | } 48 | 49 | /* css for keywords */ 50 | .sh-DRAKULA-keyword { 51 | color: #bd93f9; 52 | } 53 | 54 | /* css for variables */ 55 | .sh-DRAKULA-variable { 56 | color: #ffb86c; 57 | font-style: italic; 58 | } 59 | 60 | /* css for class */ 61 | .sh-DRAKULA-class { 62 | color: #8be9fd; 63 | } 64 | 65 | /* css for operators */ 66 | .sh-DRAKULA-operator { 67 | color: rgb(167, 167, 167); 68 | } 69 | 70 | /* css for strings and characters */ 71 | .sh-DRAKULA-string { 72 | color: #f1fa8c; 73 | } 74 | 75 | /* css for numerals */ 76 | .sh-DRAKULA-numeral, .sh-DRAKULA-cssColor { 77 | color: #bd93f9; 78 | } 79 | 80 | /* css for functions */ 81 | .sh-DRAKULA-Func { 82 | color: #50fa7b; 83 | } 84 | 85 | /* css for comments */ 86 | .sh-DRAKULA-comment { 87 | color: #6272a4; 88 | } 89 | 90 | /* css for inbuilt fucntions */ 91 | .sh-DRAKULA-inBuilt { 92 | color: #ff5555; 93 | font-style: italic; 94 | } 95 | 96 | .sh-DRAKULA-preprocess { 97 | color: #ff79c6; 98 | padding: 2px; 99 | } 100 | 101 | .sh-DRAKULA-classSelector, .sh-DRAKULA-idSelector { 102 | color: #ff5555; 103 | } 104 | 105 | .sh-DRAKULA-property { 106 | color: cyan; 107 | } 108 | 109 | .sh-DRAKULA-value { 110 | color: rgb(163, 100, 208); 111 | } 112 | 113 | .cspsh[lang="html"] .sh-DRAKULA-variable{ 114 | color: #d6d6d6; 115 | font-style: normal; 116 | } -------------------------------------------------------------------------------- /Source/ThemeStyles/MONOKAIDARK.css: -------------------------------------------------------------------------------- 1 | .MONOKAI { 2 | background-color: #272822; 3 | color: #F8F8F2; 4 | } 5 | 6 | /*Styling the topBar*/ 7 | .copyHolder-MONOKAI { 8 | background-color: rgba(39, 40, 34, 0.66); 9 | color: rgb(202, 202, 202); 10 | backdrop-filter: blur(18px); 11 | font-family: 'Roboto', sans-serif; 12 | padding: 1%; 13 | margin: -1%; 14 | height: 6vh; 15 | border-top-right-radius: 6px; 16 | border-top-left-radius: 6px; 17 | width: inherit; 18 | position: absolute; 19 | display: flex; 20 | align-content: center; 21 | justify-content: space-evenly; 22 | align-items: center; 23 | } 24 | 25 | .lineCount-MONOKAI-done { 26 | overflow: hidden; 27 | height: 44vh; 28 | line-height: 2.5vh; 29 | color: #8f937e; 30 | padding-right: .5rem; 31 | border-right: 4px solid #8f937e; 32 | } 33 | 34 | .sh-MONOKAI-lineHighlight { 35 | border-top: 1px solid #a89f65; 36 | border-bottom: 1px solid #a89f65; 37 | background-color: #a89f656d; 38 | } 39 | 40 | /*End of the top bar css*/ 41 | /* css for types */ 42 | .sh-MONOKAI-type { 43 | color: #66D9EF; 44 | } 45 | 46 | /* css for keywords */ 47 | .sh-MONOKAI-keyword { 48 | color: #F92672; 49 | } 50 | 51 | /* css for variables */ 52 | .sh-MONOKAI-variable { 53 | color: #FD971F; 54 | font-style: italic; 55 | } 56 | 57 | /* css for class */ 58 | .sh-MONOKAI-class { 59 | color: #A6E22E; 60 | } 61 | 62 | /* css for operators */ 63 | .sh-MONOKAI-operator { 64 | color: rgb(167, 167, 167); 65 | } 66 | 67 | /* css for strings and characters */ 68 | .sh-MONOKAI-string { 69 | color: #E6DB74; 70 | } 71 | 72 | /* css for numerals */ 73 | .sh-MONOKAI-numeral, .sh-MONOKAI-cssColor { 74 | color: #AE81FF; 75 | } 76 | 77 | /* css for functions */ 78 | .sh-MONOKAI-Func { 79 | color: #FBF46D; 80 | } 81 | 82 | /* css for comments */ 83 | .sh-MONOKAI-comment { 84 | color: #75715E; 85 | font-style: italic; 86 | } 87 | 88 | /* css for inbuilt fucntions */ 89 | .sh-MONOKAI-inBuilt { 90 | color: #66edef; 91 | font-style: italic; 92 | } 93 | 94 | .sh-MONOKAI-preprocess { 95 | color: #F92672; 96 | padding: 2px; 97 | } 98 | 99 | .sh-MONOKAI-classSelector, 100 | .sh-MONOKAI-idSelector { 101 | color: greenyellow; 102 | } 103 | 104 | .sh-MONOKAI-property { 105 | color: #66D9EF; 106 | } 107 | 108 | .sh-MONOKAI-value { 109 | color: #AE81FF; 110 | } 111 | 112 | .cspsh[lang="html"] .sh-MONOKAI-variable{ 113 | color: #d6d6d6; 114 | font-style: normal; 115 | } -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: rgb(28, 28, 28); 3 | color: rgb(206, 206, 206); 4 | font-family: 'Courier New', Courier, monospace; 5 | } 6 | 7 | p{ 8 | font-size: 32px; 9 | } 10 | 11 | .CSPSH{ 12 | font-family: 'Fira code', monospace; 13 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CSPSH 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

16 | Code Tabs: 17 |

18 |
19 |
20 | <!DOCTYPE html> 21 | <html lang="en"> 22 | <head> 23 | <title>Home</title> 24 | <script src="script.js">​</script> 25 | <link href="style.css" rel="stylesheet">​</link> 26 | </head> 27 | <body> 28 | <h1>Hello World</h1> 29 | </body> 30 | </html> 31 |
32 |
33 | body{ 34 | background-color: black; 35 | color: white; 36 | } 37 | 38 | h1{ 39 | font-size: 5rem; 40 | } 41 |
42 |
43 | const a = 10; 44 | const b = 20; 45 | let c = add(a, b); 46 | console.log(c); 47 | 48 | function add(a, b) { 49 | console.log("retro effect!") 50 | return a + b; 51 | } 52 |
53 |
54 |

55 | Without Code Tabs: 56 |

57 |
58 | def add(a, b): 59 | return a + b 60 | a = 10 61 | b = 20 62 | c = add(a, b) 63 | print(c) 64 |
65 |
66 | public class Main { 67 | public static void main(String[] args) { 68 | int a = 10; 69 | int b = 20; 70 | int c = add(a, b); 71 | System.out.println(c); 72 | } 73 | public static int add(int a, int b) { 74 | return a + b; 75 | } 76 | } 77 |
78 |
79 | //storyscript is a language developed by lines-of-code. You can search story script in github to know more 80 | 81 | int a = 10 82 | int b = 20 83 | 84 | print(a + b) 85 |
86 |
87 | #include <stdio.h> 88 | 89 | int main() { 90 | int a = 10; 91 | int b = 20; 92 | int c = add(a, b); 93 | printf("%d", c); 94 | return 0; 95 | } 96 | 97 | int add(int a, int b) { 98 | return a + b; 99 | } 100 |
101 |
102 | const a = 10; 103 | const b = 20; 104 | let c = add(a, b); 105 | console.log(c, "simple mode"); 106 | 107 | function add(a, b) { 108 | return a + b; 109 | } 110 |
111 | 112 | 113 | 114 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import { CSPSH } from "./Source/CSPSH.js" 2 | 3 | window.onload = function () { 4 | console.log('loaded') 5 | const cspsh = new CSPSH 6 | const options = { 7 | file: ['add.java', 'add.py'], 8 | highlightLine: [[1, 3, 5], [2, 3]], 9 | SourcePath: 'default' 10 | } 11 | cspsh.highlight(options) 12 | } --------------------------------------------------------------------------------