Skip to content
Merged
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ console.log('Every repo must come with a mascot.');

### Theming {/* #theming */}

By default, the Prism [syntax highlighting theme](https://github.com/FormidableLabs/prism-react-renderer#theming) we use is [Palenight](https://github.com/FormidableLabs/prism-react-renderer/blob/master/packages/prism-react-renderer/src/themes/palenight.ts). You can change this to another theme by passing `theme` field in `prism` as `themeConfig` in your docusaurus.config.js.
By default, the Prism [syntax highlighting theme](https://github.com/FormidableLabs/prism-react-renderer#theming) we use is [Palenight](https://github.com/FormidableLabs/prism-react-renderer/blob/master/packages/prism-react-renderer/src/themes/palenight.ts). You can change this to another theme by passing the `theme` field in `prism` as `themeConfig` in your docusaurus.config.js.

For example, if you prefer to use the `dracula` highlighting theme:

Expand Down Expand Up @@ -223,7 +223,7 @@ You can set your own background color for highlighted code line in your `src/css
}
```

If you also need to style the highlighted code line in some other way, you can target on `theme-code-block-highlighted-line` CSS class.
If you also need to style the highlighted code line in some other way, you can target the `theme-code-block-highlighted-line` CSS class.

### Highlighting with metadata string {/* #highlighting-with-metadata-string */}

Expand Down Expand Up @@ -380,7 +380,7 @@ If you use number ranges in metastring (the `{1,3-4}` syntax), Docusaurus will a

You can disable the default line highlighting comments with `magicComments: []`. If there's no magic comment config, but Docusaurus encounters a code block containing a metastring range, it will error because there will be no class name to apply—the highlighting class name, after all, is just a magic comment entry.

Every magic comment entry will contain three keys: `className` (required), `line`, which applies to the directly next line, or `block` (containing `start` and `end`), which applies to the entire block enclosed by the two comments.
Every magic comment entry will contain three keys: `className` (required), `line`, which applies to the directly following line, or `block` (containing `start` and `end`), which applies to the entire block enclosed by the two comments.

Using CSS to target the class can already do a lot, but you can unlock the full potential of this feature through [swizzling](../../swizzling.mdx).

Expand Down Expand Up @@ -611,7 +611,7 @@ render(

## Using JSX markup in code blocks {/* #using-jsx-markup */}

Code block in Markdown always preserves its content as plain text, meaning you can't do something like:
Code blocks in Markdown always preserve their content as plain text, meaning you can't do something like:

```ts
type EditUrlFunction = (params: {
Expand Down Expand Up @@ -845,4 +845,4 @@ The props accepted are `language`, `title` and `showLineNumbers`, in the same wa

Although discouraged, you can also pass in a `metastring` prop like `metastring='{1-2} title="/src/components/HelloCodeTitle.js" showLineNumbers'`, which is how Markdown code blocks are handled under the hood. However, we recommend you [use comments for highlighting lines](#highlighting-with-comments).

As [previously stated](#using-jsx-markup), syntax highlighting is only applied when the children is a simple string.
As [previously stated](#using-jsx-markup), syntax highlighting is only applied when the child is a simple string.
Loading