ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Declare lowlight as a peerDependency (#2625)

Browse Source 
Declare lowlight as a peerDependency to delegate
the control of which version of lowlight is used
to the client application

Co-authored-by: Enrique Alcantara <ealcantara@gitlab.com>
This commit is contained in:
Enrique Alcántara
2022-06-06 13:33:52 -04:00
committed by GitHub
parent fd593bb93e
commit 39f5e4c31e
7 changed files with 39 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/api/nodes/code-block-lowlight.md
View File

@@ -7,17 +7,35 @@ icon: terminal-box-fill
[![Version](https://img.shields.io/npm/v/@tiptap/extension-code-block-lowlight.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-code-block-lowlight)
[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-code-block-lowlight.svg)](https://npmcharts.com/compare/@tiptap/extension-code-block-lowlight?minimal=true)
With the CodeBlock extension you can add fenced code blocks to your documents. It’ll wrap the code in `<pre>` and `<code>` HTML tags.
With the CodeBlockLowlight extension you can add fenced code blocks to your documents. It’ll wrap the code in `<pre>` and `<code>` HTML tags.
::: warning Syntax highlight dependency
This extension relies on the [lowlight](https://github.com/wooorm/lowlight) library to apply syntax highlight to the code block’s content.
:::
Type <code>&grave;&grave;&grave;&nbsp;</code> (three backticks and a space) or <code>&Tilde;&Tilde;&Tilde;&nbsp;</code> (three tildes and a space) and a code block is instantly added for you. You can even specify the language, try writing <code>&grave;&grave;&grave;css&nbsp;</code>. That should add a `language-css` class to the `<code>`-tag.
## Installation
```bash
npm install @tiptap/extension-code-block-lowlight
npm install lowlight @tiptap/extension-code-block-lowlight
```
## Settings
### lowlight
You should provide the `lowlight` module to this extension. Decoupling the `lowlight`
package from the extension allows the client application to control which
version of lowlight it uses and which programming language packages it needs to load.
```js
import { lowlight } from 'lowlight/lib/core'
CodeBlockLowlight.configure({
lowlight,
})
```
### HTMLAttributes
Custom HTML attributes that should be added to the rendered HTML tag.