repository·master·Indexed 41 days ago
https://github.com/jez/pandoc-markdown-css-themeA collection of CSS files and Pandoc templates for generating responsive, high-quality standalone HTML files from Markdown. Features include Tufte-style side notes via pandoc-sidenote, KaTeX math rendering, dark mode support, and highly configurable visual styles using CSS variables. Supports advanced code block features like line numbering, highlighting, and tight-code blocks for ASCII art, as well as responsive width utility classes (.wide, .extra-wide, .full-width) and colored note callouts.
This project provides CSS files and a template designed for use with Pandoc to generate standalone HTML files.
Key features include:
The theme provides a responsive, CSS-variable-driven design for Pandoc-generated HTML. Key features include:
pandoc-sidenote).By default, side notes are inline (only supporting inline elements like bold or links). To include block elements like code blocks or lists, you must use block-based syntax.
Prefix the multi-element note with four spaces of indentation (or a tab). Use specific markers in the footnote definition:
{^} for a block-based side note.{^-} for a block-based margin note.| Feature | Inline Notes | Block-based Notes |
|---|---|---|
| Content | Inline elements only | Supports block elements (code, lists, etc.) |
| Rendering | Immediately right of anchor | Next to the top of the enclosing paragraph |
| Mobile | Clickable link to expand | Uses JavaScript to reorder/collapse |
Note: To include figures with captions in a margin note, use raw HTML <figure> tags directly within the footnote definition.
Some text which has a block-based side note[^1] and margin note[^2].
[^1]:
{^} This is a block-based side note. It can contain, e.g. code blocks:
```ruby
puts "Hello, world!"
```
[^2]:
{^-} This is a block-based margin note. It can contain, e.g. code blocks:
```ruby
puts "Hello, world!"
```The theme transforms standard Markdown footnotes into side notes (margin notes) positioned in the page margin.
[^1] are converted to side notes. They are numbered and aligned with the text.[^label] followed by {-} in the definition.{.} prefix in the definition.Note: Side notes and margin notes do not share a namespace. If you mix them, you may end up with two different numbering sequences.
Markdown footnotes become side notes.[^1]
[^1]: This is a side note.
[^margin]:
{-} This is a margin note without a number.
[^foot]:
{.} This is a standard footnote at the bottom of the page.The theme supports standard ordered and unordered lists, as well as advanced list patterns:
[ ] for unchecked and [x] for checked items. Note that visual rendering of checkboxes may vary by browser.<p> tags.\ at the end of a line to force a line break within a list item.<!-- Checklist -->
- [ ] Unchecked item
- [x] Checked item
<!-- Paragraphs in a list item -->
- **Bold Title**
This is the first paragraph of the list item body.
This is the second paragraph of the same list item.
<!-- Forced line break in list -->
- Line starts here\
Next line follows immediately.Standard Markdown footnotes ([^1]) are automatically converted into side notes in the margin.
To create a margin note without a number, use the {-} syntax within the footnote definition.
Note on behavior:
font-style reset to ensure they do not inherit italics from the blockquote.Markdown footnotes become side notes.[^1]
[^1]: This is a standard side note.
[^margin]:
{-} This is a margin note without a number.The theme uses KaTeX to render math. It supports multiple forms of math input (inline and display) provided Pandoc is configured with tex_math_single_backslash. Pandoc will automatically include the necessary CSS and JavaScript files if math is detected in the document.
$a^2 + b^2 = c^2$ (inline)
$$
\frac{ - b \pm \sqrt {b^2 - 4ac} }{2a}
$$The theme includes custom print styles optimized for U.S. Letter size paper.
Key behaviors:
The theme supports inline math using \(...\) and block math using $$...$$. It also provides specialized support for figures that can be styled with different widths using HTML classes within the Markdown file.
Supported figure width classes:
wide: Standard wide figure.extra-wide: Even wider than wide.left-align-caption: Forces the caption to be left-aligned.full-width: Occupies the full width of the container.<!-- Inline Math -->
\(a^2 + b^2 = c^2\)
<!-- Block Math -->
$$\frac{\Delta \, \Gamma, e : \forall (u :: \kappa). \tau \qquad \Delta \vdash c :: \kappa}{\Delta \, \Gamma \vdash e[c] : [c/u]\tau}$$
<!-- Wide Figure with Caption -->
<figure class="wide">
\[\frac{\Delta \, \Gamma, e : \forall (u :: \kappa). \tau \qquad \Delta \vdash c :: \kappa}{\Delta \, \Gamma \vdash e[c] : [c/u]\tau}\]
<figcaption>Typing rule for $\forall$ types</figcaption>
</figure>skylighting-solarized-theme.css. To use a different syntax theme, you can replace or override this file.