Using Code Blocks for Technical Content

Technical documentation lives or dies on its code examples. A well-placed code block turns an abstract explanation into something a developer can copy, paste, and run. A poorly formatted one — wrong language, no highlighting, missing context — forces the reader to mentally parse syntax instead of focusing on the concept.

Quixli's code blocks give you syntax highlighting for 200+ languages, one-click copy, line numbers, line highlighting, and dark/light themes — all inside the same editor you use for prose. Whether you're documenting an API, writing a tutorial, or sharing a configuration file, code blocks make your technical content clear and actionable.

Creating a Code Block

You have three ways to insert a code block, depending on your workflow:

Markdown Shortcut (Fastest)

Type three backticks (```) at the beginning of a new line and press Space or Enter. The block converts to a code block immediately. You can optionally type the language name after the backticks — ```javascript — to set syntax highlighting in one step. This mirrors the Markdown fenced code block syntax you already know.

Slash Command

Type /code in any empty block and select "Code" from the menu. The code block appears with a language selector dropdown at the top. Choose your language and start typing.

Paste Detection

When you paste content that looks like code (indented text, curly braces, semicolons), Quixli offers a prompt: "This looks like code. Format as code block?" Click Yes and the pasted text is wrapped in a code block with auto-detected language highlighting.

Language Support

Quixli uses a modern syntax highlighting engine that supports 200+ programming languages. When you create a code block, select the language from the dropdown to enable proper color-coding of keywords, strings, comments, functions, and variables.

If your language isn't in the list — which is rare — select "Plain Text." The code still renders in a monospace code block, just without color-coding.

Code Block Features

Each code block ships with several features that make technical content more readable and more useful:

Syntax Highlighting

Automatic color-coding based on the selected language. Keywords appear in one color, strings in another, comments in a muted shade, and function names stand out. This visual structure helps readers parse code at a glance — they can spot the function signature, find the return value, and skip over boilerplate without reading every character.

One-Click Copy

Hover over any code block and a Copy button appears in the top-right corner. One click copies the entire code block to the clipboard — without line numbers, without the language label, just clean code ready to paste into a terminal or editor. Readers see a brief "Copied!" confirmation.

Line Numbers

Toggle line numbers from the code block menu (⋮ → Line Numbers). When enabled, each line gets a number on its left edge. This is invaluable for documentation: "On line 12, replace the API key with your own" is far clearer than "find the API key somewhere in the middle."

Line Highlighting

Draw attention to specific lines by adding a highlighted background. Click the code block menu and enter line ranges (e.g., 3-5, 12). Highlighted lines stand out visually, making it easy to direct readers to the important parts of a long snippet.

Inline Code vs. Code Blocks

Quixli offers two code formatting options, and using the right one makes your content more readable:

A good rule of thumb: if the code is part of a sentence ("Set debug to true"), use inline code. If it stands alone and a reader might copy it, use a block.

Special Code Block Modes

Terminal Style

Select "Bash" or "Shell" as the language and enable Terminal Style from the menu. The block renders with a dark background resembling a terminal window, complete with a title bar. Prefix commands with $ (user) or # (root) to distinguish input from output. The copy button copies only the commands, not the prompts or output — which is exactly what readers want.

Diff Mode

Select "Diff" as the language to show code changes. Lines prefixed with + render with a green background (additions), lines with - render with a red background (deletions), and unchanged lines appear normally. This mode is perfect for changelogs, migration guides, and pull request summaries.

Best Practices for Code in Documentation

Great technical documentation isn't just code dumps — it's code in context. Here are the patterns that make code examples genuinely useful:

• Always select the correct language: The wrong language produces misleading highlighting. Python highlighted as JavaScript is worse than no highlighting at all

• Show only what's relevant: Don't paste a 200-line file when the reader only needs 10 lines. Extract the relevant section and note where it fits in the larger file

• Add a filename caption: When the code belongs in a specific file, add the filename above the block (e.g., src/config.ts). This tells readers exactly where to put the code

• Explain before and after: Introduce what the code does in a sentence or two above it, and follow with what happens next or what the output looks like

• Never include secrets: API keys, passwords, tokens, and connection strings should use placeholder values like YOUR_API_KEY or sk-xxxx

• Test your examples: Broken code in documentation is worse than no code at all. Run every example before publishing

• Use line highlighting for focus: In a long example, highlight the 2–3 lines the reader should pay attention to

Frequently Asked Questions

Can I change the language of an existing code block?

Yes — click the language label at the top of the code block (or open the ⋮ menu) and select a different language. Syntax highlighting updates instantly; your code isn't modified.

Does the code block support auto-indentation?

Yes. When you press Enter inside a code block, the new line inherits the indentation of the previous line. Pressing Tab adds one level of indentation, and Shift + Tab removes one level. The indent size (2 spaces or 4 spaces) follows the selected language's convention.

Can readers run code directly in my page?

Not in the standard editor. Code blocks are display-only — readers can copy and run the code in their own environment. If you need interactive, runnable examples, embed a CodePen, JSFiddle, or Repl.it using the /embed block.

How do I display code output alongside the code?

Create two consecutive blocks: a code block with the source code, and a second code block (language: "Plain Text" or "Bash") with the output. Add a brief paragraph between them like "Running this produces:" to connect them logically.

Does the copy button include line numbers?

No. The Copy button copies only the raw code text, with no line numbers, no language label, and no extra formatting. The result is clean, paste-ready code.