Add Beautiful Code Highlighting with Syntax.js

Category: Javascript | February 26, 2024
Author:williamtroup
Views Total:1 view
Official Page:Go to website
Last Update:February 26, 2024
License:MIT

Preview:

Add Beautiful Code Highlighting with Syntax.js

Description:

Syntax.js is a lightweight, customizable, and extensible syntax highlighting library written in vanilla JavaScript.

It currently supports 26 programming languages (like C, Java, JavaScript, and Python), and is fully compatible with CSS/SASS/Bootstrap.

How to use it:

1. Load the core JavaScript and Stylesheet in the document:

<link rel="stylesheet" href="/dist/syntax.js.min.css" />
<script src="/dist/syntax.js"></script>

2. Load languages of your choice:

<script src="/dist/languages/syntax.bash.js"></script>
<script src="/dist/languages/syntax.c.js"></script>
<script src="/dist/languages/syntax.c-plus-plus.js"></script>
<script src="/dist/languages/syntax.c-sharp.js"></script>
<script src="/dist/languages/syntax.dart.js"></script>
<script src="/dist/languages/syntax.delphi.js"></script>
<script src="/dist/languages/syntax.f-sharp.js"></script>
<script src="/dist/languages/syntax.go.js"></script>
<script src="/dist/languages/syntax.html.js"></script>
<script src="/dist/languages/syntax.java.js"></script>
<script src="/dist/languages/syntax.javascript.js"></script>
<script src="/dist/languages/syntax.kotlin.js"></script>
<script src="/dist/languages/syntax.lua.js"></script>
<script src="/dist/languages/syntax.matlab.js"></script>
<script src="/dist/languages/syntax.ms-sql.js"></script>
<script src="/dist/languages/syntax.perl.js"></script>
<script src="/dist/languages/syntax.php.js"></script>
<script src="/dist/languages/syntax.powershell.js"></script>
<script src="/dist/languages/syntax.python.js"></script>
<script src="/dist/languages/syntax.r.js"></script>
<script src="/dist/languages/syntax.ruby.js"></script>
<script src="/dist/languages/syntax.rust.js"></script>
<script src="/dist/languages/syntax.scala.js"></script>
<script src="/dist/languages/syntax.swift.js"></script>
<script src="/dist/languages/syntax.typescript.js"></script>
<script src="/dist/languages/syntax.visual-basic.js"></script>

3. Specify the languages for your code snippets using the data-syntax-language attribute. Setting it to “unknown” will force the code block to still be rendered, but no highlighting will be applied.

<code data-syntax-language="javascript">
  <pre>
    Code Here
  </pre>
</code>

4. Available options and callbacks.

  • showCopyButton: Shows Copy button
  • copyButtonText: Text to display on the Copy button
  • printButtonText: Text to display on the Print button
  • removeBlankLines: Whether to auto-remove blank lines
  • showLineNumbers: Whether to show line numbers
  • highlightValues: Whether to highlight values
  • highlightAttributes: Whether to highlight attributes in HTML markup
  • highlightKeywords: Whether to highlight keywords
  • highlightStrings: Whether to highlight strings
  • highlightComments: Whether to highlight comments
  • safeMode: Allows all errors to be ignored
  • highlightAllDomElementTypes: The element types should be looked up when rendering
  • allowHtmlInTextDisplay: if HTML can be used in the text displays (buttons, tabs, descriptions, etc).
  • showLanguageLabel: Whether to show the language label
  • showPrintButton: Whether to show the print button
  • padLineNumbers: Whether the line numbers should be shown as “01” instead of “1”
  • removeDuplicateBlankLines: Whether to remove duplicate blank lines
  • doubleClickToSelectAll: Determine whether to select all of the code by double-clicking in the containers.
  • languageLabelCasing: Specify what casing should be used for the language label (defaults to “lowercase”, accepts “initial” and “lowercase”
  • buttonsVisible: If buttons are visible. Default: true.
  • maximumButtons: Max number of buttons. Default: 2.
  • onCopy(code): Callback
  • onRenderComplete(element): Callback
  • onBeforeRenderComplete(element): Callback
  • onKeywordClicked(keyword): Callback
  • onValueClicked(keyword): Callback
  • onValueRendered(keyword): Callback
  • onKeywordRender(keyword): Callback
  • onStringRender(string): Callback
  • onCommentRender(comment): Callback
  • onPrint(code): Callback
  • onAttributeClicked(attribute): Callback
  • onAttributeRender(attribute): Callback
  • onButtonsOpened(): Callback
  • onButtonsClosed(): Callback
<code 
  data-syntax-language="c-sharp" 
  data-syntax-options="{ 'copyButtonText': 'Copy Code', 'onCopy': onCopyCustomTrigger, 'onKeywordClicked': onKeywordClickedCustomTrigger }"
  data-syntax-buttons="[{ 'text': 'Button 1', 'className': 'customClass', onClick': yourJsFunction }]>
  ... 
</code>

5. The library also supports tabbed code blocks:

<code data-syntax-language="tabbed">
  <div data-syntax-language="javascript" data-syntax-tab-contents="true">
    <pre>
      ...
    </pre>
  </div>
  <div data-syntax-language="html" data-syntax-tab-contents="true">
    <pre>
      ...
    </pre>
  </div>
  <div data-syntax-language="unknown" data-syntax-tab-contents="{ 'title': 'Unknown Language', 'description': 'Description here', 'onOpen': onTabOpen }">
    <pre>
      ...
    </pre>
  </div>
</code>

6. API methods.

// Finds all new code elements and renders them.
$syntax.highlightAll();
// Renders a specific DOM element.
$syntax.highlightElement(elementOrId)
// Returns all the elements that have been detected and rendered.
$syntax.getElementsHighlighted();
// Adds a new language that can be rendered.
$syntax.addLanguage(languageName, languageDetails, triggerRender);
// Returns the language details (by name) that can be rendered.
$syntax.getLanguage(languageName)
// Removes new language that can be rendered.
$syntax.removeLanguage(languageName);
// Returns all the languages that can be rendered.
$syntax.getLanguages();
// Sets the specific configuration options that should be used.
$syntax.setConfiguration(newOptions);
// Adds a new language alias.
$syntax.addAlias(alias, language, triggerRender);
// Removes a language alias.
$syntax.removeAlias(alias);
// Returns a language alias.
$syntax.getAlias(alias);
// Returns all the language aliases.
$syntax.getAliases();
// Returns the code inside a specific element (without rendering colors).
$syntax.getCode(elementId);
// Destroy
$syntax.destroyAll();
$syntax.destroy(elementId):
// Returns the version of Syntax.js.
$syntax.getVersion();

7. Override the default CSS variables to create your own styles.

{
    // Fonts
    --syntax-js-default-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    // Colors
    --syntax-js-color-keyword: #A71500;
    --syntax-js-color-value: #F28C28;
    --syntax-js-color-attribute: #730dd9;
    --syntax-js-color-keyword-hover: #FF0000;
    --syntax-js-color-value-hover: #FFAC1C;
    --syntax-js-color-attribute-hover: #a656f5;
    --syntax-js-color-comment: #78b13f;
    --syntax-js-color-multi-line-comment: var(--syntax-js-color-comment);
    --syntax-js-color-string: #484dd2;
    --syntax-js-color-multi-line-string: var(--syntax-js-color-string);
    --syntax-js-color-black: #3b3a3a;
    --syntax-js-color-white: #F5F5F5;
    --syntax-js-color-dark-gray: #808080;
    --syntax-js-color-gray: #BBBBBB;
    --syntax-js-color-lighter-gray: #C0C0C0;
    // Containers
    --syntax-js-container-background-color: #e8e6e6;
    --syntax-js-container-border-color: var(--syntax-js-color-black);
    --syntax-js-container-syntax-background-color: #EEEEEE;
    --syntax-js-container-syntax-border-color: #CCCCCC;
    --syntax-js-container-numbers-background-color: #dddddd;
    --syntax-js-container-numbers-border-color: var(--syntax-js-color-gray);
    --syntax-js-container-description-background-color: var(--syntax-js-container-numbers-background-color);
    --syntax-js-container-description-border-color: var(--syntax-js-container-numbers-border-color);
    // Tabs
    --syntax-js-tab-background-color: var(--syntax-js-color-white);
    --syntax-js-tab-text-color: var(--syntax-js-color-black);
    --syntax-js-tab-border-color: var(--syntax-js-color-black);
    --syntax-js-tab-active-background-color: var(--syntax-js-color-black);
    --syntax-js-tab-active-text-color: var(--syntax-js-color-white);
    --syntax-js-tab-active-border-color: var(--syntax-js-color-black);
    --syntax-js-tab-hover-background-color: var(--syntax-js-container-numbers-background-color);
    --syntax-js-tab-hover-text-color: var(--syntax-js-color-black);
    --syntax-js-tab-hover-border-color: var(--syntax-js-color-black);
    // Buttons
    --syntax-js-button-background-color: var(--syntax-js-color-black);
    --syntax-js-button-text-color: var(--syntax-js-color-white);
    --syntax-js-button-hover-background-color: var(--syntax-js-color-dark-gray);
    --syntax-js-button-hover-text-color: var(--syntax-js-color-white);
    // Borders
    --syntax-js-border-radius: 0.5rem;
    --syntax-js-border-style-scrollbar: inset 0 0 6px var(--syntax-js-color-dark-gray);
    --syntax-js-border-size: 0.5px;
    // Transitions
    --syntax-js-transition: all .3s;
}

Changelog:

v2.4.3 (02/26/2024)

  • Update

v2.4.2 (02/06/2024)

  • Update

v2.4.1 (01/18/2024)

  • Update

v2.4.0 (01/15/2024)

  • All “:root” variables now start with “–syntax-js-“, which will prevent collisions with other libraries.

v2.3.1 (01/04/2024)

  • Added new callbacks

v2.3.0 (12/30/2023)

  • Added a new JSON property called “wordRegEx”, which states the Regular Expression that is used for looking up keywords, values, attributes, and tags (optional, use %word% to state the lookup).
  • Added a new binding custom trigger called “onBeforeRenderComplete”, which states an event that should be triggered before an element is rendered.
  • Added new configuration option “allowHtmlInTextDisplay” (defaults to true), which states if HTML can be used in the text displays (buttons, tabs, descriptions, etc).
  • Double-clicking in the description container (when tabs are used) will now select all the code (if the setting is turned on).
  • Renamed some of the “:root” variables so they are easier to read.
  • Improved browser support for the no-text selection CSS.
  • Bugfixes.

v2.2.0 (12/30/2023)

  • Added “description” support for “data-syntax-tab-contents” options.
  • Added support for the CSS styling language (importable file).
  • The JSON property “comment” is now optional.
  • The RegEx used for searching for keywords, values, attributes, and tags, is now much more accurate.
  • Added more callbacks.
  • Added new “:root” variables

v2.1.1 (12/26/2023)

  • Added an extra check when processing the attribute “data-syntax-tab-contents” options.

v2.1.1 (12/26/2023)

  • Added an extra check when processing the attribute “data-syntax-tab-contents” options.

v2.1.0 (12/20/2023)

  • Added full binding support for “data-syntax-tab-contents”, which allows some configuration to be set per tab.
  • Added a new binding option called “title”, which states the title to use for a Tab (defaults to null, which forces the language name to be used).
  • Added a new binding custom trigger called “onOpen”, which states an event that should be triggered when a tab is opened (passes to the language to the event).
  • Renamed the CSS class “label” to “language-label”
  • Cleanup and refactor

v2.0.0 (12/18/2023)

  • Added tabbing support! This feature allows you to render languages under one tabbed container
  • Added support for the Powershell programming language
  • Added support for the Dart programming language
  • Added support for the Delphi programming language
  • Added support for the Lua programming language
  • All buttons (and tabs) are now rendered as buttons instead of divs (this includes minor CSS changes)
  • Added new “:root” variable “–button-hover-background-color”, which states the background color to use for the buttons when hovered (including custom ones, unless overridden)
  • Added new “:root” variable “–button-hover-text-color”, which states the text color to use for the buttons when hovered (including custom ones, unless overridden)

v1.9.0 (12/15/2023)

  • Added “Attributes” support for languages, which allows attributes (for markup languages only) to be rendered using a different CSS class.
  • Added a new binding option called “highlightAttributes”, which states if attributes should be highlighted (defaults to true).
  • Added a new binding custom trigger called “onAttributeClicked”, which states an event that should be triggered when an attribute is clicked.
  • Added a new binding custom trigger called “onAttributeRender”, which states an event that should be triggered when an attribute is rendered.

v1.8.2 (12/13/2023)

  • Added support for the PHP programming language (importable file).
  • Minor improvement to the dark-mode theme to make sure the language label stands out a little more.
  • Grammar and spelling corrections across the project.
  • More internal renaming to make things a bit clearer.
  • Unknown language types, and non-markup-based languages, are now encoded before the main render is done (so special characters show up correctly).
  • Moved the configuration option “buttonsVisible” to the binding options (so it can be set per DOM element).
  • Moved the configuration option “maximumButtons” to the binding options.
  • Fixed a fault that caused the buttons to be hidden (and could not be shown) when the total buttons are smaller (or equal) to “maximumButtons” and “buttonsVisible” is false.

v1.8.1 (12/13/2023)

  • Minor error logging improvements (uses less code and can be re-used as needed).
  • Internal refactoring to make some of the code match up to the names of the sections.

v1.8.0 (12/11/2023)

  • Added new public function “getCode()”, which is used to return all of the code inside an element (without rendering colors).
  • Added support for the Perl programming language (importable file).
  • Added support for the Bash scripting language (importable file).
  • Added support for the Kotlin programming language (importable file).
  • Added support for the R programming language (importable file).
  • Added support for the Matlab programming language (importable file).
  • Added support for the Scala programming language (importable file).
  • Moved some of the keywords for the supported languages into “values”.
  • Multi-line comments are now processed before single-line comments.
  • Added a new binding option called “doubleClickToSelectAll”, which states that double-clicking in one of the containers (numbers, code) will select all the code (defaults to true).
  • Added a new binding option called “languageLabelCasing”, which states the casing to use for the language label (defaults to “uppercase”).
  • Added new “:root” variable “–button-background-color”, which will allow you to set the background color of the buttons.
  • Added new “:root” variable “–button-text-color”, which will allow you to set the text color of the buttons.
  • Massively improved the theme “dark-mode” (much cleaner and modern).
  • Shared colors now reference the original base “:root” variable.
  • Double-clicking in the code container will now select all the code (if the new setting is turned on).
  • Removed a lot of duplicated code.
  • Lots of clean-ups across the HTML testing files.

v1.7.3 (12/10/2023)

  • The custom buttons “onClick” event now accepts the code as a parameter.
  • Fixed a fault that caused the wrong events to be assigned to the custom buttons when there is more than one.
  • Added a new binding option called “removeDuplicateBlankLines” (defaults to true), which will remove all duplicate blank lines.
  • Added a new CSS class “multi-line-comment”, which is used for multi-line comments.
  • Added a new CSS class “multi-line-string”, which is used for multi-line strings.

v1.7.2 (12/10/2023)

  • Added “multiLineComment” support for Markup languages (HTML, for example).
  • Minor code cleanups to make things a bit more readable.

v1.7.0 (12/10/2023)

  • If there is no code available for highlighting, the element is skipped and left as is (an error log is thrown when safeMode is off).
  • Added support for the HTML markup language (importable file).
  • Added a new JSON property called “isMarkUp”, which states if the language is a markup language (processed slightly differently).
  • Fixed a fault that caused comments and strings from other elements to be added to others.

v1.6.2 (12/08/2023)

  • Internal code cleanup to make object parsing a little clearer.

v1.6.1 (12/08/2023)

  • Fixed some of the documentation files that were pointing at the wrong files.

v1.6.0 (12/07/2023)

  • Added “Values” support for languages, which allows values (such as “true” and “false”) to be rendered using a different CSS class.
  • Added opening/closing support for the buttons shown in the top right corner (along with configurable options).
  • Added a new binding option called “highlightValues”, which states if values should be highlighted (defaults to true).
  • Added a new binding custom trigger called “onValueClicked”, which states an event that should be triggered when a value is clicked.
  • Added a new binding custom trigger called “onValueRender”, which states an event that should be triggered when a value is rendered.
  • All CSS colors are now root variables, allowing full themes to be generated without referring CSS class names.
    Added a new folder under “dist” called “themes”, which contains a new dark mode (works based on the browser configuration).
  • Added new configuration option “maximumButtons” (defaults to 2), which states the maximum number of buttons that can be shown before the opening/closing button is shown.
  • Added new configuration option “buttonsVisible” (defaults to true), which states if the buttons are open (visible).
  • Added new configuration option “buttonsOpenerText” (defaults to “<“), which states the text that should be used for the open buttons button.
  • Added new configuration option “buttonsCloserText” (defaults to “>”), which states the text that should be used for the close buttons button.
  • Renamed the CSS class “number” to “numbers”.
  • By default, the buttons are no longer bold.
  • By default, the language label is now bold and uses a grey font color.

v1.5.1 (12/05/2023)

  • Removed some unneeded CSS from the testing CSS file
  • Fixed a security risk when injecting titles into a new window

v1.5.0 (12/05/2023)

  • Added full language alias support (allows alias names to be added that point to a specific language name).
  • Added full custom buttons support via a new attribute called “data-syntax-buttons”.
  • Added support for the F# programming language (importable file).
  • Added support for the Rust programming language (importable file).
  • Added new public function “addAlias()”, which is used to add a new language alias.
  • Added new public function “removeAlias()”, which is used to remove a language alias.
  • Added new public function “getAlias()”, which is used to get a language alias.
  • Added new public function “getAliases()”, which is used to get all language aliases.
  • Renamed the public function “getAllLanguages” to “getLanguages()”.
  • Renamed the public function “getAllElementsHighlighted()” to “getElementsHighlighted()”.
  • NUSPEC file improvements for NuGet.org submissions.
  • Fixed a fault that prevented the public function “removeLanguage()” from returning a valid flag when a language has been removed.
  • Fixed package description and keywords being inconsistent with the main repository.

v1.4.0 (12/05/2023)

  • The binding attribute “data-syntax-language” can now be set to “unknown”, which will force the layout to still be drawn, but no highlighting will be applied.
  • Added a new JSON property called “keywordsCasing”, which states what casing should be used for the keywords when rendered (optional, defaults to “initial”, accepts “uppercase” and “lowercase”).
  • Added a new setting called “padLineNumbers”, which states if the line numbers should be padded (defaults to false).
  • Added new configuration option “highlightAllDomElementTypes” (defaults to “div” and “code”), which states the element types that should be looked up when rendering.
  • Double-clicking the numbers column (when enabled) will now highlight all the code in the right panel.
  • The “data-syntax-options” attribute now can accept a function name to get the required configuration.
  • Fixed a fault that prevented the “onKeywordClicked” custom trigger being assigned to keywords when “highlightKeywords” is set to false.

v1.3.0 (12/04/2023)

  • Added multi-line string support for languages that support them (such as C#).
  • String searching now uses an improved RegEx for more accurate searches.
  • SafeMode support and new global library configuration options.
  • Added new public function “setConfiguration()”, which will set up global configuration options for the whole library.
  • The public function “getAllElementsHighlighted()” now returns a cloned version of “_elements” instead of a referenced version.
  • The public functions “getLanguage()” and “getAllLanguages()” now return a cloned version of the language objects.
  • Added new configuration option “safeMode” (defaults to true), which allows all errors to be ignored (all valid renders will still be displayed).
  • All language files (under “dist/languages”) now pass false for the “triggerRender” parameter, as the library will render automatically once the DOM is loaded.
  • Removed some code that was no longer needed.
  • The numbers column can no longer have its numbers selected (CSS controlled).
  • The buttons (top right) can no longer have their text selected (CSS controlled).
  • The error log shown when a language is not available is now only shown when “safeMode” is disabled.
  • Fixed the public function “destroyAll()” reset the “_elements” variable to the wrong type.

v1.2.0 (12/04/2023)

  • Printing support is now available as a configurable button (on by default).
  • A new language label is now shown in the UI to state what language is being shown.
  • Redesigned the layout for the button(s) shown in the top left of the display (minor CSS class name changes), along with the new language label.
  • Added new BootStrap testing files.
  • Added a new JSON property called “friendlyName”, which states the friendly name to be shown in the language label.
  • The JSON property “keywords” now accepts either an array of strings or a space-separated string.
    Settings:
  • Added a new setting called “showLanguageLabel”, which states if the language label should be shown (defaults to true).
  • Added a new setting called “showPrintButton”, which states if the Print button should be shown (defaults to true).
  • Added a new setting called “printButtonText”, which states the text that should be shown for the new Print button (defaults to “Print”).
  • Added a new custom trigger “onPrint”, which is called when the “Print” button is clicked.
  • Fixed the default color for “code” DOM elements reverting to the color set in Bootstrap.

v1.1.0 (12/02/2023)

  • The render() method now only scans for “div” and “code” DOM element types (faster).
  • When a specific language is not supported, a new error log is shown in the console.
  • Added new custom trigger “onKeywordRender”, which is called when a keyword is rendered (before main render completion).
  • Added new custom trigger “onStringRender”, which is called when a string is rendered (before main render completion).
  • Added new custom trigger “onCommentRender”, which is called when a comment is rendered (before main render completion).

v1.0.0 (12/02/2023)

  • Case Sensitive: Added a new language property “caseSensitive” (defaults to true) which states if the keyword matching is case sensitive.
  • Added support for the TypeScript programming language (importable file).
  • Added a new setting called “highlightComments”, which states if comments should be highlighted (defaults to true).
  • Added a new setting called “highlightStrings”, which states if strings should be highlighted (defaults to true).
  • Added a new setting called “highlightKeywords”, which states if keywords should be highlighted (defaults to true).
  • Renamed the public function “findAndBuildNewElements()” to “highlightAll()”.
  • Renamed the public function “getRenderedElements()” to “getAllElementsHighlighted()”.
  • Added new public function “removeLanguage()”, which will remove a specific language that can be rendered by name.
  • Added new public function “getAllLanguages()”, which will return the object that contains all the language details.
  • Added new public function “highlightElement()”, which will render a specific DOM element (accepts either the element or the ID of the element).
  • Added new public function “getLanguage()”, which will return the details for a specific language (by name).
  • Renamed the public function “destroy()” to “destroyAll()”.
  • Added a new version of the public function “destroy()”, which will revert a specific element to its original HTML (minus the syntax attributes).
  • Renamed the custom trigger “onRender” to “onRenderComplete”.
  • The numbers column is now hidden by default on smaller screens (and the code line will now wrap).
  • Bugfixes.

You Might Be Interested In:


Leave a Reply