From 690f200766be93878e23d4f853a744a29adfd77b Mon Sep 17 00:00:00 2001 From: Melissa Garcia Date: Fri, 30 Oct 2026 09:58:04 -0700 Subject: [PATCH] docs: document code block option rules and fix language lists --- src/pages/blocks/code/code-highlighted-line.md | 2 +- src/pages/blocks/code/code-overload.md | 10 +++++----- src/pages/blocks/code/code-with-try-playground.md | 2 +- src/pages/blocks/code/index.md | 9 ++++++++- src/pages/blocks/codeblock/index.md | 2 +- src/pages/blocks/tab/index.md | 2 +- 6 files changed, 17 insertions(+), 10 deletions(-) diff --git a/src/pages/blocks/code/code-highlighted-line.md b/src/pages/blocks/code/code-highlighted-line.md index 632183a..57f5d54 100644 --- a/src/pages/blocks/code/code-highlighted-line.md +++ b/src/pages/blocks/code/code-highlighted-line.md @@ -12,7 +12,7 @@ Highlight specific lines in code blocks to draw attention to important code sect Use `data-line` attribute after the language identifier: ```` -```console-data-line="1-2,5,9-20" +```bash-data-line="1-2,5,9-20" ``` ```` diff --git a/src/pages/blocks/code/code-overload.md b/src/pages/blocks/code/code-overload.md index 068b831..d5c0e8a 100644 --- a/src/pages/blocks/code/code-overload.md +++ b/src/pages/blocks/code/code-overload.md @@ -1,6 +1,6 @@ --- title: Code Overload Example -description: Complex code examples demonstrating multiple features like line highlighting, offsets, and disabling line numbers. +description: Complex code examples demonstrating multiple features like line highlighting and disabling line numbers. --- # Code Overload Example @@ -9,7 +9,7 @@ Advanced examples showcasing the combination of multiple code block features for ## Combined Features -You can combine multiple attributes with hyphens: +You can combine multiple attributes with hyphens, in any order: ```` ```javascript-disableLineNumbers-data-line="2-4" @@ -33,12 +33,12 @@ function calculateTotal(items) { } ``` -### Example 2: Line Offset with Highlighting +### Example 2: Highlighting with Line Numbers ```python-data-line="2-3" def process_data(data): - cleaned = data.strip() # Line 11 - Highlighted - parsed = json.loads(cleaned) # Line 12 - Highlighted + cleaned = data.strip() # Highlighted + parsed = json.loads(cleaned) # Highlighted return parsed ``` diff --git a/src/pages/blocks/code/code-with-try-playground.md b/src/pages/blocks/code/code-with-try-playground.md index 6995073..8eb13b3 100644 --- a/src/pages/blocks/code/code-with-try-playground.md +++ b/src/pages/blocks/code/code-with-try-playground.md @@ -22,7 +22,7 @@ javascript-data-playground-session-id="sessionName"-data-playground-mode="playgr - **data-playground-session-id**: Unique identifier for the playground session (e.g., `"createAndFillRectangle"`) - **data-playground-mode**: Mode of the playground (typically `"playground"`) -- **data-playground-session**: Session state, usually `"new"` to create a fresh session +- **data-playground-session**: Optional. Only `"new"` is supported, and it's the default. - **data-playground-execution-mode**: Execution mode, typically `"script"` for script execution - **data-playground-url**: Prod URL of the playground environment where code will be executed - **data-playground-url-stage**: Stage URL of the playground environment where code will be executed diff --git a/src/pages/blocks/code/index.md b/src/pages/blocks/code/index.md index d50e0bd..3b18dca 100644 --- a/src/pages/blocks/code/index.md +++ b/src/pages/blocks/code/index.md @@ -22,7 +22,7 @@ console.log(greeting); The following language identifiers are supported for syntax highlighting: -`bash`, `c`, `cpp`, `csharp`, `css`, `git`, `go`, `graphql`, `http`, `java`, `javadoc`, `javascript`, `jsdoc`, `json`, `json5`, `jsx`, `less`, `markdown`, `markup`, `objectc`, `php`, `python`, `regex`, `rest`, `sass`, `sql`, `typescript`, `xml-doc`, `yaml` +`bash`, `c`, `cpp`, `csharp`, `css`, `git`, `go`, `graphql`, `http`, `java`, `javadoc`, `javascript`, `jsdoc`, `json`, `json5`, `jsx`, `kotlin`, `less`, `markdown`, `markup`, `objectivec`, `php`, `python`, `regex`, `rest`, `sass`, `sql`, `swift`, `typescript`, `yaml` ## Advanced Features @@ -64,6 +64,13 @@ npm install npm start ``` +### Option rules + +- Combine options after the language with dashes, in any order, for example `javascript-disableLineNumbers-data-line="2,4"`. +- Put attribute values in quotes, for example `data-line="2,4"`. Values can't contain spaces. +- Misspelled or unsupported options that start with `disable` or `data-`, and unquoted values, are ignored with a warning in the browser console. The code is still highlighted. +- Anything else right after the language, like `javascript-foo`, is read as part of the language name, so the code isn't highlighted. + ## Examples See detailed examples and use cases: diff --git a/src/pages/blocks/codeblock/index.md b/src/pages/blocks/codeblock/index.md index fd6dbae..05f334a 100644 --- a/src/pages/blocks/codeblock/index.md +++ b/src/pages/blocks/codeblock/index.md @@ -94,7 +94,7 @@ Without `languages`, the component still presents heading tabs, but hides the pi The following language identifiers are supported: -`bash`, `c`, `cpp`, `csharp`, `css`, `git`, `go`, `graphql`, `http`, `java`, `javadoc`, `javascript`, `jsdoc`, `json`, `json5`, `jsx`, `kotlin`, `less`, `markdown`, `markup`, `objectivec`, `php`, `python`, `regex`, `rest`, `sass`, `sql`, `swift`, `typescript`, `xml-doc`, `yaml` +`bash`, `c`, `cpp`, `csharp`, `css`, `git`, `go`, `graphql`, `http`, `java`, `javadoc`, `javascript`, `jsdoc`, `json`, `json5`, `jsx`, `kotlin`, `less`, `markdown`, `markup`, `objectivec`, `php`, `python`, `regex`, `rest`, `sass`, `sql`, `swift`, `typescript`, `yaml` Common aliases are also accepted (for example, `html` for `markup`, `js` for `javascript`). See the [Prism supported languages](https://prismjs.com/#supported-languages) list for each language's aliases. diff --git a/src/pages/blocks/tab/index.md b/src/pages/blocks/tab/index.md index 72f3842..933ba4a 100644 --- a/src/pages/blocks/tab/index.md +++ b/src/pages/blocks/tab/index.md @@ -38,7 +38,7 @@ Content for second tab. When using code blocks within tabs, the following language identifiers are supported: -`bash`, `c`, `cpp`, `csharp`, `css`, `git`, `go`, `graphql`, `http`, `java`, `javadoc`, `javascript`, `jsdoc`, `json`, `json5`, `jsx`, `less`, `markdown`, `markup`, `objectc`, `php`, `python`, `regex`, `rest`, `sass`, `sql`, `typescript`, `xml-doc`, `yaml` +`bash`, `c`, `cpp`, `csharp`, `css`, `git`, `go`, `graphql`, `http`, `java`, `javadoc`, `javascript`, `jsdoc`, `json`, `json5`, `jsx`, `kotlin`, `less`, `markdown`, `markup`, `objectivec`, `php`, `python`, `regex`, `rest`, `sass`, `sql`, `swift`, `typescript`, `yaml` ## Examples