highlightjs-sfmc

SFMC Languages for Highlight.js

Syntax highlighting for Salesforce Marketing Cloud languages using Highlight.js.

Includes grammars for:

• AMPscript — Marketing Cloud's proprietary scripting language
• SSJS (Server-Side JavaScript) — JavaScript runtime with SFMC-specific globals and APIs

Usage

Node.js / Bundler

npm install highlightjs-sfmc highlight.js

import hljs from 'highlight.js';
import hljsAmpscript from 'highlightjs-sfmc/ampscript';
import hljsSsjs from 'highlightjs-sfmc/ssjs';

hljs.registerLanguage('ampscript', hljsAmpscript);
hljs.registerLanguage('ssjs', hljsSsjs);

hljs.highlightAll();

CDN / Static Website

<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highlightjs-sfmc/dist/ampscript.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highlightjs-sfmc/dist/ssjs.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/default.min.css" />

<script>
  hljs.highlightAll();
</script>

Then mark your code blocks with the appropriate language:

<pre><code class="language-ampscript">
%%[
SET @name = "World"
Output(Concat("Hello, ", @name))
]%%
</code></pre>

<pre><code class="language-ssjs">
Platform.Load("core", "1");
var rows = DataExtension.Init("MyDE").Rows.Lookup(["Key"], ["value"]);
Write(Stringify(rows));
</code></pre>

What Gets Highlighted

AMPscript

Element	Examples	Scope
Block delimiters	%%[ ]%%	meta
Inline delimiters	%%= =%%	meta
Keywords	VAR SET IF THEN ELSE ENDIF FOR NEXT	keyword
Built-in functions	Lookup ContentBlockByKey Output Concat	built_in
User variables	@firstName	variable
System variables	@@ExecCtx	variable.language
Personalization	%%Name%%	variable.language
Strings	"hello" 'world'	string
Numbers	42 3.14	number
Comments	/* block comment */	comment
Operators	== != AND OR NOT	keyword / operator

SSJS

Extends JavaScript highlighting with SFMC-specific additions:

Element	Examples	Scope
SFMC globals	Platform DataExtension WSProxy HTTP	built_in
SFMC functions	Write Stringify ContentBlockByKey	built_in
Platform API	Platform.Function.* Platform.Response.*	built_in
Script.Util	Script.Util.WSProxy Script.Util.HttpRequest	built_in
Core methods	.Init() .Retrieve() .Add()	title.function.invoke

All standard JavaScript syntax (variables, control flow, strings, etc.) is highlighted by the built-in JavaScript grammar.

Testing with Highlight.js Core

To test this plugin against the Highlight.js test suite, clone the highlight.js repo and link this package into its extra/ directory. Run the commands from the parent folder that contains both highlight.js (the clone) and highlightjs-sfmc.

Bash / macOS / Linux (symbolic link):

git clone --depth 1 https://github.com/highlightjs/highlight.js.git
cd highlight.js
mkdir -p extra
ln -s ../highlightjs-sfmc extra/highlightjs-sfmc
node ./tools/build.js -t node
npm test

Windows PowerShell (directory junction; usually works without elevated rights):

git clone --depth 1 https://github.com/highlightjs/highlight.js.git
Set-Location highlight.js
New-Item -ItemType Directory -Force -Path extra | Out-Null
New-Item -ItemType Junction -Path "extra\highlightjs-sfmc" -Target (Resolve-Path "..\highlightjs-sfmc")
node .\tools\build.js -t node
npm test

If Resolve-Path fails, adjust -Target to the absolute path of your highlightjs-sfmc checkout. You can use a symbolic link instead (New-Item -ItemType SymbolicLink) if your Windows version and policy allow it (often requires an elevated shell or Developer Mode).

License

MIT