Syntax Highlighting

Astro Just Docs uses Shiki and Expressive Code for easy code highlighting

Basics

The following is a code block with JavaScript language syntax highlighting:

1
import React from 'react';

Supports Multiple Languages

Astro Just Docs uses Shiki and Expressive Code for easy code highlighting. Over 100 languages are supported with no additional configuration. Refer to the Shiki documentation for a list of supported languages.

Titles

To add a title to the code block, use the title attribute.

javascript title="Javascript"
import React from 'react';

1
import React from 'react';

Line Numbers

By default, the code block will have line numbers. To remove line numbers, use the showLineNumbers attribute set to false.

javascript showLineNumbers=false
import React from 'react';

import React from 'react';

Diff Highlighting

The following is a code block with diff. The del attribute is used to highlight the deleted lines and the add attribute is used to highlight the added lines.

javascript del={1} add={2}
const data = ['1','2'];
const data = [1,2];

1
const data = ['1','2'];
2
const data = [1,2];