Skip to main content
CodeInk supports GitHub Flavored Markdown (GFM) extensions, giving you access to alerts, tables, footnotes, task lists, and automatic heading IDs.

​
GitHub-Style Alerts

Create styled callout boxes using the GitHub alert syntax:

​
Alert Types

> [!NOTE]
> Useful information that users should know, even when skimming content.
Rendered as:
[!NOTE] Useful information that users should know, even when skimming content.

​
Implementation

Alerts are rendered via the marked-alert extension:
src/lib/markdown.ts
import markedAlert from "marked-alert"

marked.use(markedAlert())
Alert syntax is identical to GitHub’s markdown rendering, ensuring compatibility with your existing documentation.

​
Tables

Create tables using pipe syntax: 
| Syntax      | Description | Test Text     |
| ----------- | ----------- | ------------- |
| Header      | Title       | Here's this   |
| Paragraph   | Text        | And more      |
Rendered as:
SyntaxDescriptionTest Text
HeaderTitleHere’s this
ParagraphTextAnd more

​
Alignment

Control column alignment with colons: 
| Left aligned | Center aligned | Right aligned |
| :----------- | :------------: | ------------: |
| Left         | Center         | Right         |
| Text         | Text           | Text          |
Rendered as:
Left alignedCenter alignedRight aligned
LeftCenterRight
TextTextText

​
Footnotes

Add footnotes to provide additional context without cluttering the main text: 
Here's a sentence with a footnote.[^1]

Another sentence with a footnote.[^2]

[^1]: This is the first footnote.
[^2]: This is the second footnote with more details.
Rendered as: Here’s a sentence with a footnote.1 Another sentence with a footnote.2

​
Implementation

Footnotes are rendered via the marked-footnote extension:
src/lib/markdown.ts
import markedFootnote from "marked-footnote"

marked.use(markedFootnote())
Footnotes are automatically numbered and linked. Click a footnote reference to jump to its definition.

​
Task Lists

Create interactive checkboxes for task tracking: 
- [x] Completed task
- [ ] Uncompleted task
- [ ] Another task to do
Rendered as:
  • Completed task
  • Uncompleted task
  • Another task to do
Task lists in CodeInk are visual only. Checking/unchecking boxes requires editing the markdown source.

​
Auto-Linked Headings

All headings automatically receive IDs based on their text content, making them linkable: 
## My Awesome Heading

This heading gets the ID: #my-awesome-heading

​
Implementation

Heading IDs are generated via marked-gfm-heading-id:
src/lib/markdown.ts
import { gfmHeadingId } from "marked-gfm-heading-id"

marked.use(gfmHeadingId())
Use heading IDs to create internal document links: [Jump to section](#my-awesome-heading)

​
Strikethrough

Strike through text using double tildes: 
~~This text is struck through~~
Rendered as: This text is struck through

​
Automatic URL Linking

URLs are automatically converted to clickable links: 
Visit https://codeink.app for more info
Rendered as: Visit https://codeink.app for more info

​
Best Practices

Use alerts strategically

Don’t overuse alerts. Reserve them for truly important information.

Keep tables simple

Complex tables can be hard to read. Consider breaking them into multiple tables.

Number footnotes logically

Use sequential numbering for footnotes to maintain readability.

Test task lists

Preview your task lists to ensure proper formatting before exporting.

Footnotes

  1. This is the first footnote. ↩
  2. This is the second footnote with more details. ↩

Build docs developers (and LLMs) love

Get started for freeTalk to us