-
Notifications
You must be signed in to change notification settings - Fork 5
JavaScript Syntax Highlighter
vrana/jush
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
<!DOCTYPE html> <html lang="en"> <meta charset="utf-8"> <title>JUSH - JavaScript Syntax Highlighter</title> <link rel="stylesheet" media="(prefers-color-scheme: dark)" href="demo-dark.css"> <body> <h1>JUSH - JavaScript Syntax Highlighter</h1> <p>Highlights the full stack of PHP application starting with HTML, PHP, SQL and JavaScript code and ending with HTTP headers, <code>php.ini</code> settings or database variables.</p> <ul> <li><a href="demo.html">Demo</a></li> <li><a href="sql.html">SQL highlighter for various databases</a></li> <li><a href="tests.html">Tests</a></li> <li><a href="https://jush.sourceforge.io/">Homepage</a></li> </ul> <h3>Features</h3> <ul> <li>Highlights and links documentation in spaghetti code like nothing else: <code class="jush"><span style="font: small;"><?php mysql_query("SELECT 1"); ?></span></code>.</li> <li>Supported languages: everything related to PHP: HTML5, JS, CSS 3, SQL including variables (multiple dialects), <code>php.ini</code> directives, HTTP and e-mail headers, Apache config. Anything could be embedded into each other, e.g. <code class="language-php">header("Content-Type: text/html")</code> or <code class="language-css_pro">color: expression(parentNode.style.color)</code>.</li> <li>Allows using HTML tags in source code (could be used for pointing out important parts): <code class="language-php">echo "This part is <b>important</b>."</code>. Produces overlapping HTML tags in this case though.</li> <li>Performance is a priority.</li> <li><code class="language-htm"><textarea></code> <a href="textarea.html">syntax highlight</a>.</li> </ul> <h3>Installation instructions</h3> <ol> <li>Copy <a href="jush.css">jush.css</a> and <a href="jush.js">jush.js</a> into your directory.</li> <li>Add following snippet before the <code class="jush"></body></code> tag in HTML file: <pre><code class="jush"><script src="jush.js"></script> <script> jush.style('jush.css'); jush.highlight_tag('code'); </script> </code></pre> All <code class="jush"><code class="jush"></code> tags will be highlighted. Language is determined by the class name beginning with "jush-" (e.g. <code class="jush"><code class="jush-js"></code>). Default language is <code>htm</code>. It is also possible to use <code class="jush"><code class="language-*"></code>. </li> <li>If you want to enable dark mode, call <code class="jush-js">jush.style('jush-dark.css')</code>. To enable it only based on user preferences, call <code class="jush-js">jush.style('jush-dark.css', '(prefers-color-scheme: dark)')</code>.</li> </ol> <p>Alternativelly call <code class="jush-js">jush.highlight(language, text)</code> to syntax highlight single text.</p> <h3>Command-line help reference</h3> <p>It is also possible to use JUSH for opening the appropriate documentation in a browser. On Windows, it is possible to run:</p> <pre>Syntax: WScript jush-help.wsf filename line column [tabsize] [word] Example: WScript jush-help.wsf readme.html 2 2 </pre> <p>The example should open a browser with documentation of the <code class="jush"><html></code> tag which is at position 2:2 of this file.</p> <script src="jush.js"></script> <script> jush.style('jush.css'); jush.style('jush-dark.css', '(prefers-color-scheme: dark)'); jush.highlight_tag('code'); </script>
About
JavaScript Syntax Highlighter