CodeConfiguration

types/handlers/Code.ts:363-364

Resolved configuration the CodeHandler is constructed with.

Shared properties

These apply regardless of the selected backend.

addLanguageClass? string | boolean | undefinedtypes/handlers/Code.ts:44

Whether to add a class to the <code> tag with the name of the language of the code it contains. If a string is provided, a class will be added and the provided string will be used as the prefix for the class name.

Default 'language-'

Example

<pre><code class="language-javascript">
...
</code></pre>

appendNewline? boolean | undefinedtypes/handlers/Code.ts:138

Whether to append a newline to code blocks. Should have no visual impact whatsoever, as <pre><code>example</code></pre> and <pre><code>example\n</code></pre> render identically. Defaults to true for the sake of CommonMark compliance.

Default true

inlineMeta? ((inlineCode: string, validLanguageTag: (tag: string) => boolean) => { l…types/handlers/Code.ts:115-128

Sveltex supports inline code highlighting, provided that the inline code span contains a special string of some sort that acts as a language tag and possibly meta string. However, the question is what part of the inline code span should be considered to be this special string (if any).

Unfortunately, as far as I'm aware, there is no widespread convention for this, let alone a formal specification. As such, this option allows you to specify a custom function that will be used to extract the special string from the inline code span:

Default

(inlineCode, validLanguageTag) => {
    let code = inlineCode;
    let lang: string | undefined;
    let meta: string | undefined;
    if (code.startsWith('{')) {
        const m = code.match(/^\{(.+?)\}\s(\s*\S[\w\W]*)$/);
        const specialCandidate = m?.[1];
        const codeCandidate = m?.[2];
        if (specialCandidate && codeCandidate) {
            const space = specialCandidate.match(/\s/)?.index;
            const tag = specialCandidate.slice(0, space);
            if (validLanguageTag(tag)) {
                code = codeCandidate;
                lang = tag;
                if (space) meta = specialCandidate.slice(space + 1);
            }
        }
    } else {
        const m = code.match(/^([\w-]['\w-]*)\s(\s*\S[\w\W]*)$/);
        const tag = m?.[1];
        const codeCandidate = m?.[2];
        if (tag && codeCandidate && validLanguageTag(tag)) {
            code = codeCandidate;
            lang = tag;
        }
    }
    return { code, lang, meta };
};

Since this function only receives the inner content of the code span, syntaxes such as `code`{js} are not supported.

transformers? Transformerstypes/handlers/Code.ts:53

Transformers to apply to

• the inner content of the input which CodeHandler will receive for processing, or to
• the inner content of the output produced by the CodeHandler (or by whatever handler it forwards the content to).

post?Transformer<CodeProcessOptionsBase & WithOriginal> | Transformer<CodePro…types/handlers/Handler.ts:58-62

Transformations to apply to the output produced by the backend.

Each transformation may be a function (str: string, opts: Options) => string, or a 2-tuple [string | RegExp, string]. The transformers are called in the order they are listed on the output of the previous transformation (or on the original content if it's the first transformation). Each transformation transformation is applied as follows, depending on its type:

• 2-tuple: transformed = content.replaceAll(...transformation)
• Function: transformed = transformation(content, opts)

pre?Transformer<CodeProcessOptionsBase> | Transformer<CodeProcessOptionsBase…types/handlers/Handler.ts:44

Transformations to apply to the content before passing it to the backend for processing.

Each transformation may be a function (str: string, opts: Options) => string, or a 2-tuple [string | RegExp, string]. The transformers are called in the order they are listed on the output of the previous transformation (or on the original content if it's the first transformation). Each transformation transformation is applied as follows, depending on its type:

• 2-tuple: transformed = content.replaceAll(...transformation)
• Function: transformed = transformation(content, opts)

highlight.js backend

Options available when the backend is highlight.js.

langAlias? Record<string, string> | undefinedtypes/handlers/Code.ts:200-202

Record of language aliases.

Example

{
   'example-alias': 'JavaScript',
}

theme? ({ type?: "none" | "cdn" | "self-hosted" | undefined; } & { type?: "none…types/handlers/Code.ts:175

Configure the theme to use for syntax highlighting.

starry-night backend

Options available when the backend is starry-night.

lang? "abnf" | "actionscript" | "ada" | "angelscript" | "applescript" | "xml" …types/handlers/Code.ts:242

Default language.

Default null

langAlias? Record<string, string> | undefinedtypes/handlers/Code.ts:254-256

Record of language aliases.

Example

{
   'example-alias': 'JavaScript',
}

languages? ("abnf" | "actionscript" | "ada" | "angelscript" | "applescript" | "xml"…types/handlers/Code.ts:223-235

Languages to register. If 'all', all languages are registered. If 'common', some ≈35 common languages are registered.

If an array is provided, each entry will be treated as a language or custom grammar to register. Furthermore, the first entry of the array may be 'all' or 'common' to extend the respective sets of languages.

Default 'common'

theme? ({ type?: "none" | "cdn" | "self-hosted" | undefined; } & { type?: "none…types/handlers/Code.ts:209

Configure the theme to use for syntax highlighting.

shiki backend

Options available when the backend is shiki.

langAlias? Record<string, string> | undefinedtypes/handlers/Code.ts:351-353

Record of language aliases.

Example

{
   'example-alias': 'javascript',
}

parseMetaString? ((metaString: string, code: string, lang: string) => Record<string, unkn…types/handlers/Code.ts:332-339

Customize how the meta string is parsed, if present. The result will be merged into the meta prop that is passed to any plugins/transformers in Shiki's pipeline.

Default

(metaString) => {
    return Object.fromEntries(
        metaString
            .split(' ')
            .reduce(
                (
                    prev: [string, boolean | string][],
                    curr: string,
                ) => {
                    const [key, value] = curr.split('=');
                    const isNormalKey =
                        key && /^[A-Z0-9]+$/i.test(key);
                    if (isNormalKey)
                        prev = [...prev, [key, value ?? true]];
                    return prev;
                },
                [],
            ),
    );
}

Example

Consider the following code block:

```js key1=value1 key2 key3=false
console.log('Hello, world!');
```

The meta string is 'key1=value key2 key3=false', and the default parseMetaString function will parse the meta string as follows:

{
    key1: 'value1',
    key2: true,
    key3: 'false'
}

shiki? (Omit<Partial<CodeToHastOptions<BundledLanguage, BundledTheme>>, "struct…types/handlers/Code.ts:263-281

Default options for Shiki's highlighter.

escape backend

Options available when the backend is escape.

escape? SimpleEscapeInstructiontypes/handlers/Code.ts:165

braces?boolean | undefinedtypes/handlers/Verbatim.ts:70

Whether braces (aka. curly brackets) should be escaped.

• { → {
• } → }

Default true

html?boolean | undefinedtypes/handlers/Verbatim.ts:83

Whether HTML should be escaped.

• < → <
• > → >
• & → &
• " → "
• ' → '

Default true