Marp code blocks: syntax highlighting, size, style
Marp highlights fenced code with highlight.js out of the box: write the language after the backticks, and the block is coloured in the preview, the HTML, the PDF and the PPTX. The size comes from the theme (section pre { font-size: 16px; }); a listing that does not fit is split across slides at a function boundary, not shrunk below about 14 pixels.
This guide covers the syntax, the languages, sizing, long listings, the auto-scaling Marp Core applies to code, line highlighting workarounds, and the colours.
The syntax
```python
def schedule(ready, quantum):
p = ready.popleft()
run(p, quantum)
```
The language name after the opening fence selects the grammar. Without one, the block renders as plain monospace. Inline code uses single backticks and follows the surrounding text's size.
Languages
Marp Core registers every highlight.js grammar, so any name highlight.js knows works: python, js/javascript, ts, java, c, cpp, csharp, go, rust, bash, sql, json, yaml, html/xml, css, latex, r, matlab, and about 180 more. Use the names from the highlight.js language list; aliases such as py and sh work too.
Size
Code inherits the slide's base size, which is too large for real listings. Set it once, in the theme or the front matter:
---
marp: true
style: |
section pre { font-size: 16px; line-height: 1.35; }
section code { font-size: 0.9em; }
---
For the one slide with a longer listing, a scoped style:
<style scoped>
section pre { font-size: 13px; }
</style>
Thirteen pixels at 1280×720 is the floor for a room; below it, split the slide.
Long listings
A 40-line function is four slides, not one small one. Split at a boundary that makes sense (a function, a loop body), title each slide with what that part does, and repeat the two lines of context at the top of the continuation. The audience reads code slower than prose; one idea per slide applies to code too.
Marp Core's auto-scaling helps at the margins: when a code block's lines are wider than the slide, it scales the block down to fit the width (the marp-auto-scaling behaviour that the browser script and marp-cli apply). It does not shrink the height, so a block that is too tall still overflows the bottom.
Wrapping
Code blocks do not wrap by default, which is right for code. For a long shell command that must be read in full, allow wrapping on that slide:
<style scoped>
section pre code { white-space: pre-wrap; }
</style>
Highlighting a line
highlight.js has no line-highlighting syntax. Two workarounds that render everywhere: put a comment marker on the line (# <-- here), or show the block twice, the second time with only the lines that matter. HTML <mark> inside a fenced block is not parsed (it is code), so it will not work.
Colours
The highlight colours come from the theme: the built-in themes ship a light and, for gaia and uncover invert, a dark palette. In a custom theme, style the .hljs-* classes (.hljs-keyword, .hljs-string, .hljs-comment, …) or import a highlight.js stylesheet into the theme file and adjust the block's background:
section pre { background: #f6f8fa; border-radius: 6px; padding: 12px 16px; }
Keep the contrast high; projectors wash out pastel token colours.
Export
The PDF and the default PPTX carry the highlighting as rendered. The editable PPTX mode approximates the block with a text shape and drops the colours. The online editor highlights the common languages; marp-cli and VS Code highlight all of them.
FAQ
How do I add syntax highlighting in Marp?
Write the language after the opening fence (```python). Marp uses highlight.js and colours the block in every export.
How do I change the code block font size in Marp?
section pre { font-size: 16px; } in the theme or the front matter style: block; <style scoped> for a single slide.
Can I highlight a specific line in a Marp code block?
Not natively. Mark the line with a comment, or show the relevant lines alone on the next slide.
Why does my code overflow the slide?
Marp scales code down to fit the width but not the height. Split the listing across slides at a natural boundary.