Add Beautiful Code Highlighting with Syntax.js

Authorwilliamtroup

Last UpdateSeptember 6, 2024

LicenseMIT

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 a translation of your choice:

<script src="/dist/translations/syntax.translations.en.js"></script>
...

3. 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>

4. 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>

5. Available options and callbacks.

buttons.showCopyButton: Shows Copy button.
buttons.showPrint: Whether to show the print button.
buttons.visible: If buttons are visible. Default: true.
buttons.maximum: Max number of buttons. Default: 2.
removeBlankLines: Whether to auto-remove blank lines
showLineNumbers: Whether to show line numbers
highlight.values: Whether to highlight values
highlight.attributes: Whether to highlight attributes in HTML markup
highlight.keywords: Whether to highlight keywords
highlight.strings: Whether to highlight strings
highlight.comments: 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
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”
events.onCopy(code): Callback
events.onRenderComplete(element): Callback
events.onBeforeRenderComplete(element): Callback
events.onKeywordClicked(keyword): Callback
events.onValueClicked(keyword): Callback
events.onValueRendered(keyword): Callback
events.onKeywordRender(keyword): Callback
events.onStringRender(string): Callback
events.onCommentRender(comment): Callback
events.onPrint(code): Callback
events.onAttributeClicked(attribute): Callback
events.onAttributeRender(attribute): Callback
events.onButtonsOpened(): Callback
events.onButtonsClosed(): Callback

<code 
  data-syntax-language="c-sharp" 
  data-syntax-options="{ 'copyButtonText': 'Copy Code', events: {'onCopy': onCopyCustomTrigger, 'onKeywordClicked': onKeywordClickedCustomTrigger} }"
  data-syntax-buttons="[{ 'text': 'Button 1', 'className': 'customClass', onClick': yourJsFunction }]>
  ... 
</code>

6. 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' }">
    <pre>
      ...
    </pre>
  </div>
</code>

7. 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();

8. All possible configurations.

setConfiguration({
  safeMode: true,
  highlightAllDomElementTypes: [ "div", "code" ],
  allowHtmlInTextDisplay: true,
  buttonsOpenerText: "<",
  buttonsCloserText: ">",
  objectErrorText: "Errors in object: {{error_1}}, {{error_2}}",
  attributeNotSetErrorText: "The attribute '{{attribute_name}}' has not been set correctly.",
  languageNotSupportedErrorText: "Language '{{language}}' is not supported.",
  noCodeAvailableToRenderErrorText: "No code is available to render.",
})

9. 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:

v3.1.0 (09/06/2024)

Code improvement
All “highlight” binding options have now been moved into a new object called “highlight” (for example, “highlight.keywords”).
All “button” binding options have now been moved into a new object called “buttons”

v3.0.1 (07/19/2024)

Code improvement

v3.0.0 (07/16/2024)

Rewritten in TypeScript

v2.5.0 (06/18/2024)

Added export support for the global “$syntax” object, which can now be imported as “syntax.js”.
Added translations.
The binding options “copyButtonText” and “printButtonText” are now part of the main configuration.

v2.5.0 (03/29/2024)

Added “use strict” support internally and updated all public functions to use the new scope.
All default parameters are now read more accurately and apply the correct defaults.
Added new options.
Fixed bugs.

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.

Add Beautiful Code Highlighting with Syntax.js

How to use it:

Changelog:

See Also:

You Might Be Interested In:

Leave a ReplyCancel reply