ExtensionsInline syntax
Code
The code extension: inline code, fenced code blocks, commands, and keybindings.
The code extension renders inline code and fenced code blocks and adds the code commands.
Setup
CodeExtension enables both inline code and code blocks. Import it and register it with the editor:
import { Editor } from "@inksane/core";
import { CodeExtension } from "@inksane/core/extensions/code";
const editor = new Editor({
element: document.getElementById("editor")!,
extensions: [CodeExtension],
});The element with the ID editor must already exist. If you use BaseKit,
code is already included. BaseKit({ code: false }) disables both inline code and code blocks.
What it adds
- Decorates
InlineCodewith.inksane-mark-inline-codeand hides the backticks. - Adds
.inksane-code-blockto the lines of aFencedCodeblock and hides the fence and the language hint. - Converts pasted
<pre>and<code>elements to fenced and inline code.
When the pasted content contains backticks, the fence grows so the code block stays valid: the extension uses at least three backticks, or one more than the longest run inside the content.
Commands
| Command | Description |
|---|---|
setCode({ content?, pos? }) | Wraps the range in backticks. With content, inserts it wrapped in backticks. |
removeCode({ pos? }) | Removes the backticks around the range. |
toggleCode({ pos? }) | setCode or removeCode. |
insertCodeBlock({ lang?, pos? }) | Wraps the range in a fenced code block, with an optional language hint. |
removeCodeBlock({ pos? }) | Removes the fence and keeps the code. |
toggleCodeBlock({ lang?, pos? }) | insertCodeBlock or removeCodeBlock. |
editor.commands.toggleCode();
editor.chain().insertCodeBlock({ lang: "ts" }).focus().run();Keyboard
| Keys | Action |
|---|---|
Mod-. | Toggles inline code. At a collapsed cursor it inserts a pair of backticks and puts the caret inside. |
Mod-Shift-. | Toggles a fenced code block. |
Mod-Shift-> | Same as Mod-Shift-., for keyboard layouts where the other key is awkward. |
Styling
[data-inksane-editor-content] {
.inksane-mark-inline-code {
font-family: monospace;
background: #e0e0e0;
padding: 1px 4px;
border-radius: 4px;
}
.inksane-code-block {
font-family: monospace;
background: #e0e0e0;
}
}