Skip to content

Update code block title options #809

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jun 12, 2025
Merged

Update code block title options #809

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ed1edad
Documentation edits made through Mintlify web editor
ethanpalm Jun 11, 2025
ed7b28c
Update code.mdx
ethanpalm Jun 11, 2025
2230917
fix formatting
ethanpalm Jun 11, 2025
65fbddc
concise title intro
ethanpalm Jun 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 14 additions & 6 deletions code.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@

### Code blocks

Use [fenced code blocks](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) by enclosing code in three backticks. Specify the programming language for syntax highlighting and to enable meta options. Add any meta options after the language.
Use [fenced code blocks](https://www.markdownguide.org/extended-syntax/#fenced-code-blocks) by enclosing code in three backticks. Specify the programming language for syntax highlighting and to enable meta options. Add any meta options, like a title or icon, after the language.

```java HelloWorld.java lines icon="java"
class HelloWorld {
Expand Down Expand Up @@ -49,13 +49,14 @@

### Option syntax

* **String and boolean options**: Wrap with `""`, `''`, or no quotes.
* **Expression options**: Wrap with `{}`, `""`, or `''`.
- **String and boolean options**: Wrap with `""`, `''`, or no quotes.
- **Expression options**: Wrap with `{}`, `""`, or `''`.

### Syntax highlighting

Enable syntax highlighting by specifying the programming language after the opening backticks of a code block.

We use Shiki for syntax highlighting and support all available languages. See the full list of [languages](https://shiki.style/languages) in Shiki's documentation.

Check warning on line 59 in code.mdx

View check run for this annotation

Mintlify / Mintlify Validation - vale-spellcheck

code.mdx#L59 

Did you really mean 'Shiki'?

Check warning on line 59 in code.mdx

View check run for this annotation

Mintlify / Mintlify Validation - vale-spellcheck

code.mdx#L59 

Did you really mean 'Shiki's'?

```java
class HelloWorld {
Expand All @@ -76,7 +77,8 @@
````

### Title
Add a title after the programming language to label your code example. Titles can be any string on a single line.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can add the You can specify a title... after the first example using the default example codeblock. Then frame it like: you can also....

Copy link
Collaborator Author

@ethanpalm ethanpalm Jun 11, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see this section is mixing a couple ideas. I'm going to cut the after the programming language since that is explained with the first default example. Repeating it here is obscuring how to just add a title. Also making the options a bit more streamlined.

Going to keep both options here in case someone skips directly to this part of the page. They'll have all the info.

Add a title to label your code example. Use `title="Your title"` or a string on a single line.

```javascript Code Block Example
const hello = "world";
Expand All @@ -89,6 +91,7 @@
````

### Icon

Add an icon to your code block. You can use [FontAwesome](https://fontawesome.com/icons) icons, [Lucide](https://lucide.dev/icons/) icons, or absolute URLs.

```javascript icon="square-js"
Expand All @@ -102,9 +105,10 @@
````

### Line Highlighting

Highlight specific lines in your code blocks using `highlight` with the line numbers or ranges you want to highlight.

```javascript Line Highlighting Example highlight={1-2,5}
```javascript Line Highlighting Example highlight= {1-2,5}
const greeting = "Hello, World!";
function sayHello() {
console.log(greeting);
Expand All @@ -123,9 +127,10 @@
````

### Line focusing

Focus on specific lines in your code blocks using `focus` with line numbers or ranges.

```javascript Line Focus Example focus={2,4-5}
```javascript Line Focus Example focus= {2,4-5}
const greeting = "Hello, World!";
function sayHello() {
console.log(greeting);
Expand All @@ -144,6 +149,7 @@
````

### Show line numbers

Display line numbers on the left side of your code block using `lines`.

```javascript Show Line Numbers Example lines
Expand All @@ -165,6 +171,7 @@
````

### Expandable

Allow users to expand and collapse long code blocks using `expandable`.

```python Expandable Example expandable
Expand Down Expand Up @@ -271,6 +278,7 @@
````

### Wrap

Enable text wrapping for long lines using `wrap`. This prevents horizontal scrolling and makes long lines easier to read.

```javascript Wrap Example wrap
Expand Down