noteloom

Code

A monospaced code block with a language tag. A leaf block — its runs hold the raw code text.

json
{ "id": "cd1", "type": "code", "parentId": "root", "contentIds": ["r1"], "props": { "language": "js" } }
PropTypeDefault
languagestringplaintext

Language is a plain string (no built-in list is enforced) shown as a small header label, and round-trips through HTML export as <pre><code data-language="js">…</code></pre>.

Slash command

Code — keywords: code, codeblock, snippet, pre. Markdown shortcut: "```" on its own.

Styling

.be-code-block (wrapper), .be-code-block-header (language label / actions), .be-code-block-pre (the scrollable code itself). No syntax highlighting is built in — the text is plain, so bring your own highlighter if you want one.

Using it in your editor

useEditor() registers every built-in block by default, code included. To register only the blocks you use instead:

jsx
import { useEditor, NoteloomEditor, registerBlocks, paragraphBlockType, codeBlockType } from 'noteloom';

function Editor() {
  const editor = useEditor({
    registerBlocks: (registry) => registerBlocks(registry, { paragraph: paragraphBlockType, code: codeBlockType }),
  });
  return <NoteloomEditor editor={editor} />;
}

See Picking only the blocks you want for combining this with other types.