Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork0
License
NotificationsYou must be signed in to change notification settings
socketry/syntax-js
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A modern, framework-agnostic syntax highlighter using Web Components. This is a reimplementation ofjQuery.Syntax without jQuery dependencies.
- 🎨Modern Web Components - Uses autonomous custom elements
- 📦Dynamic Loading - Loads language definitions on-demand
- 🔒No Dependencies - Pure JavaScript, no jQuery required
- 🎯Framework Agnostic - Works with React, Vue, vanilla JS, etc.
- 🌲Clean Architecture - Well-structured classes with clear responsibilities
- 🔐Private Fields - Modern JavaScript with proper encapsulation
npm install @socketry/syntax
The easiest way to use Syntax is to let it automatically upgrade existing<code> elements:
<scripttype="module">importSyntaxfrom'@socketry/syntax';// Automatically upgrade all code blocks with language classesdocument.addEventListener('DOMContentLoaded',asyncfunction(){awaitSyntax.highlight();});</script><!-- Standard code blocks - will be automatically upgraded --><pre><codeclass="language-javascript">const hello = "world";console.log(hello);</code></pre><p>Inline code:<codeclass="language-javascript">const x = 1;</code></p>
By default,Syntax.highlight() will:
- Find all
<code>elements with class names matchinglanguage-*e.g.,language-javascript,language-python. - Replace them with
<syntax-code>web components. - Automatically detect if they're inside
<pre>tags for proper wrapping behavior.
You can customize the selector:
// Only upgrade specific elements:awaitSyntax.highlight({selector:'code.highlight'});
You can also use the<syntax-code> web component directly:
<scripttype="module">import{Syntax}from'@socketry/syntax';// Disable automatic upgrade, just register the component:awaitSyntax.highlight({upgradeAll:false});</script><!-- Use the web component directly --><syntax-codelanguage="javascript">const hello = "world"; console.log(hello);</syntax-code><!-- Inside a <pre> tag for block display with line wrapping --><pre><syntax-codelanguage="python"wrap>def greet(name): print(f"Hello, {name}!")</syntax-code></pre>
importSyntaxfrom'@socketry/syntax';importregisterJavaScriptfrom'@socketry/syntax/Language/javascript.js';// Create a Syntax instanceconstsyntax=newSyntax();registerJavaScript(syntax);// Get the JavaScript language and process code:constlanguage=awaitsyntax.getLanguage('javascript');constcode='const x = 10;';consthtml=awaitlanguage.process(code);document.body.appendChild(html);
The<syntax-code> element automatically detects whether it's inside a<pre> tag:
- Inside
<pre>: Setswrapattribute, enables line wrapping with proper indentation. - Standalone: No
wrapattribute, uses horizontal scrolling for long lines.
You can manually control this:
<!-- Force wrapping even outside <pre> --><syntax-codelanguage="javascript"wrap>const reallyLongLine = "This will wrap instead of scroll";</syntax-code><!-- Disable wrapping even inside <pre> --><pre><syntax-codelanguage="javascript">const code = "This will scroll horizontally";</syntax-code></pre>
A simple CLI tool is included to inspect the AST (Abstract Syntax Tree) of parsed code:
node bin/syntax-ast.js<language><code>
Examples:
# Parse JavaScriptnode bin/syntax-ast.js javascript"const x = 1;"# Parse Markdownnode bin/syntax-ast.js markdown'`inline code`'# Parse Pythonnode bin/syntax-ast.js python"def foo(): pass"
Output shows all matched tokens with their type, position, length, and text:
Language: javascriptCode: "const x = 1;"Matches: 3────────────────────────────────────────────────────────────────────────────────[keyword] @0..5 (5 chars) Text: "const"[operator] @8..9 (1 chars) Text: "="[constant] @10..11 (1 chars) Text: "1"This is useful for:
- Debugging language definitions
- Understanding how code is tokenized
- Testing pattern matching
- Developing new language support
About
No description, website, or topics provided.
Resources
License
Security policy
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
No releases published
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
No packages published