Markdown To HTML

GitHubOfficialFirst committed by jhaugaDistributed by GitHub

Skill
Tool integration
Software development
MIT
Low risk

From the author

Convert Markdown files to HTML similar to `marked.js`, `pandoc`, `gomarkdown/markdown`, or similar tools; or writing custom script to convert markdown to html and/or working on web template systems like `jekyll/jekyll`, `gohugoio/hugo`, or similar web templating systems that utilize markdown documents, converting them to html. Use when asked to "convert markdown to html", "transform md to html", "render markdown", "generate html from markdown", or when working with .md files and/or web a templating system that converts markdown to HTML output. Supports CLI and Node.js workflows with GFM, CommonMark, and standard Markdown flavors.

— the description by jhauga

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides comprehensive guidance on transforming Markdown files into HTML. It covers programmatic conversion using libraries like marked.js and gomarkdown, command-line processing with Pandoc, and the configuration of static site generators such as Jekyll and Hugo. It includes best practices for handling complex Markdown elements like tables, mathematical expressions, and code blocks, while emphasizing the importance of sanitizing output to prevent security vulnerabilities.

What it does

Converts Markdown files to HTML via CLI or programmatic scripts.
Supports advanced Markdown features like GFM, CommonMark, and LaTeX math.
Provides configuration patterns for static site generators like Jekyll and Hugo.
Offers guidance on integrating sanitization libraries to secure generated HTML.
Includes troubleshooting steps for common rendering and formatting issues.
Demonstrates how to handle tables, code blocks, and nested sections.

When to use it

When you need to transform .md files into HTML for web display.
When building or maintaining static websites using Jekyll or Hugo.
When automating documentation generation from Markdown source files.
When you need to programmatically render Markdown content in a Node.js or Go application.
When you need to convert between different document formats using Pandoc.

Advantages

Standardizes Markdown-to-HTML conversion across different workflows.
Provides clear security guidance for handling untrusted input.
Supports a wide range of Markdown flavors and extensions.
Facilitates both simple file conversion and complex site generation.

Usage examples

“Convert my README.md file to an HTML file using marked.”: The agent provides the command 'marked -i README.md -o README.html' and explains how to install the tool via npm.
“How do I include LaTeX math in my Markdown for HTML output?”: The agent explains the use of $ delimiters and provides the corresponding MathML structure for the HTML output.
“My Jekyll build is failing, how do I debug it?”: The agent suggests running 'jekyll doctor' to check for configuration issues and verifies the Ruby environment dependencies.
“How can I safely convert user-submitted Markdown to HTML?”: The agent provides a code example using a sanitizer like DOMPurify or Bluemonday to process the output of the Markdown parser.

Install

Download the skill as a ZIP:
https://autogineer.com/agent-skills/github/markdown-to-html/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip markdown-to-html.zip -d .agents/skills

Documentation by jhauga

Markdown to HTML Conversion

Expert skill for converting Markdown documents to HTML using the marked.js library, or writing data conversion scripts; in this case scripts similar to markedJS/marked repository. For custom scripts knowledge is not confined to marked.js, but data conversion methods are utilized from tools like pandoc and gomarkdown/markdown for data conversion; jekyll/jekyll and gohugoio/hugo for templating systems.

The conversion script or tool should handle single files, batch conversions, and advanced configurations.

When to Use This Skill

User asks to "convert markdown to html" or "transform md files"
User wants to "render markdown" as HTML output
User needs to generate HTML documentation from .md files
User is building static sites from Markdown content
User is building template system that converts markdown to html
User is working on a tool, widget, or custom template for an existing templating system
User wants to preview Markdown as rendered HTML

Converting Markdown to HTML

Essential Basic Conversions

For more see basic-markdown-to-html.md

    ```markdown
    # Level 1
    ## Level 2

    One sentence with a [link](https://example.com), and a HTML snippet like `<p>paragraph tag</p>`.

    - `ul` list item 1
    - `ul` list item 2

    1. `ol` list item 1
    2. `ol` list item 1

    | Table Item | Description |
    | One | One is the spelling of the number `1`. |
    | Two | Two is the spelling of the number `2`. |

    ```js
    var one = 1;
    var two = 2;

    function simpleMath(x, y) {
     return x + y;
    }
    console.log(simpleMath(one, two));
    ```
    ```

    ```html
    <h1>Level 1</h1>
    <h2>Level 2</h2>

    <p>One sentence with a <a href="https://example.com">link</a>, and a HTML snippet like <code>&lt;p&gt;paragraph tag&lt;/p&gt;</code>.</p>

    <ul>
     <li>`ul` list item 1</li>
     <li>`ul` list item 2</li>
    </ul>

    <ol>
     <li>`ol` list item 1</li>
     <li>`ol` list item 2</li>
    </ol>

    <table>
     <thead>
      <tr>
       <th>Table Item</th>
       <th>Description</th>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>One</td>
       <td>One is the spelling of the number `1`.</td>
      </tr>
      <tr>
       <td>Two</td>
       <td>Two is the spelling of the number `2`.</td>
      </tr>
     </tbody>
    </table>

    <pre>
     <code>var one = 1;
     var two = 2;

     function simpleMath(x, y) {
      return x + y;
     }
     console.log(simpleMath(one, two));</code>
    </pre>
    ```

Code Block Conversions

For more see code-blocks-to-html.md


    ```markdown
    your code here
    ```

    ```html
    <pre><code class="language-md">
    your code here
    </code></pre>
    ```

    ```js
    console.log("Hello world");
    ```

    ```html
    <pre><code class="language-js">
    console.log("Hello world");
    </code></pre>
    ```

    ```markdown
      ```

      ```
      visible backticks
      ```

      ```
    ```

    ```html
      <pre><code>
      ```

      visible backticks

      ```
      </code></pre>
    ```

Collapsed Section Conversions

For more see collapsed-sections-to-html.md

    ```markdown
    <details>
    <summary>More info</summary>

    ### Header inside

    - Lists
    - **Formatting**
    - Code blocks

        ```js
        console.log("Hello");
        ```

    </details>
    ```

    ```html
    <details>
    <summary>More info</summary>

    <h3>Header inside</h3>

    <ul>
     <li>Lists</li>
     <li><strong>Formatting</strong></li>
     <li>Code blocks</li>
    </ul>

    <pre>
     <code class="language-js">console.log("Hello");</code>
    </pre>

    </details>
    ```

Mathematical Expression Conversions

For more see writing-mathematical-expressions-to-html.md

    ```markdown
    This sentence uses `$` delimiters to show math inline: $\sqrt{3x-1}+(1+x)^2$
    ```

    ```html
    <p>This sentence uses <code>$</code> delimiters to show math inline:
     <math-renderer><math xmlns="http://www.w3.org/1998/Math/MathML">
      <msqrt><mn>3</mn><mi>x</mi><mo>−</mo><mn>1</mn></msqrt>
      <mo>+</mo><mo>(</mo><mn>1</mn><mo>+</mo><mi>x</mi>
      <msup><mo>)</mo><mn>2</mn></msup>
     </math>
    </math-renderer>
    </p>
    ```

    ```markdown
    **The Cauchy-Schwarz Inequality**\
    $$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
    ```

    ```html
    <p><strong>The Cauchy-Schwarz Inequality</strong><br>
     <math-renderer>
      <math xmlns="http://www.w3.org/1998/Math/MathML">
       <msup>
        <mrow><mo>(</mo>
         <munderover><mo data-mjx-texclass="OP">∑</mo>
          <mrow><mi>k</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi>
         </munderover>
         <msub><mi>a</mi><mi>k</mi></msub>
         <msub><mi>b</mi><mi>k</mi></msub>
         <mo>)</mo>
        </mrow>
        <mn>2</mn>
       </msup>
       <mo>≤</mo>
       <mrow><mo>(</mo>
        <munderover><mo>∑</mo>
         <mrow><mi>k</mi><mo>=</mo><mn>1</mn></mrow>
         <mi>n</mi>
        </munderover>
        <msubsup><mi>a</mi><mi>k</mi><mn>2</mn></msubsup>
        <mo>)</mo>
       </mrow>
       <mrow><mo>(</mo>
         <munderover><mo>∑</mo>
          <mrow><mi>k</mi><mo>=</mo><mn>1</mn></mrow>
          <mi>n</mi>
         </munderover>
         <msubsup><mi>b</mi><mi>k</mi><mn>2</mn></msubsup>
         <mo>)</mo>
       </mrow>
      </math>
     </math-renderer></p>
    ```

Table Conversions

For more see tables-to-html.md

    ```markdown
    | First Header  | Second Header |
    | ------------- | ------------- |
    | Content Cell  | Content Cell  |
    | Content Cell  | Content Cell  |
    ```

    ```html
    <table>
     <thead><tr><th>First Header</th><th>Second Header</th></tr></thead>
     <tbody>
      <tr><td>Content Cell</td><td>Content Cell</td></tr>
      <tr><td>Content Cell</td><td>Content Cell</td></tr>
     </tbody>
    </table>
    ```

    ```markdown
    | Left-aligned | Center-aligned | Right-aligned |
    | :---         |     :---:      |          ---: |
    | git status   | git status     | git status    |
    | git diff     | git diff       | git diff      |
    ```

    ```html
    <table>
      <thead>
       <tr>
        <th align="left">Left-aligned</th>
        <th align="center">Center-aligned</th>
        <th align="right">Right-aligned</th>
       </tr>
      </thead>
      <tbody>
       <tr>
        <td align="left">git status</td>
        <td align="center">git status</td>
        <td align="right">git status</td>
       </tr>
       <tr>
        <td align="left">git diff</td>
        <td align="center">git diff</td>
        <td align="right">git diff</td>
       </tr>
      </tbody>
    </table>
    ```

Working with `markedJS/marked`

Prerequisites

Node.js installed (for CLI or programmatic usage)
Install marked globally for CLI: npm install -g marked
Or install locally: npm install marked

Quick Conversion Methods

See marked.md Quick Conversion Methods

Step-by-Step Workflows

See marked.md Step-by-Step Workflows

CLI Configuration

Using Config Files

Create ~/.marked.json for persistent options:

{
  "gfm": true,
  "breaks": true
}

Or use a custom config:

marked -i input.md -o output.html -c config.json

CLI Options Reference

Option	Description
`-i, --input <file>`	Input Markdown file
`-o, --output <file>`	Output HTML file
`-s, --string <string>`	Parse string instead of file
`-c, --config <file>`	Use custom config file
`--gfm`	Enable GitHub Flavored Markdown
`--breaks`	Convert newlines to `<br>`
`--help`	Show all options

Security Warning

⚠️ Marked does NOT sanitize output HTML. For untrusted input, use a sanitizer:

import { marked } from 'marked';
import DOMPurify from 'dompurify';

const unsafeHtml = marked.parse(untrustedMarkdown);
const safeHtml = DOMPurify.sanitize(unsafeHtml);

Recommended sanitizers:

Supported Markdown Flavors

Flavor	Support
Original Markdown	100%
CommonMark 0.31	98%
GitHub Flavored Markdown	97%

Troubleshooting

Issue	Solution
Special characters at file start	Strip zero-width chars: `content.replace(/^[\u200B\u200C\u200D\uFEFF]/,"")`
Code blocks not highlighting	Add a syntax highlighter like highlight.js
Tables not rendering	Ensure `gfm: true` option is set
Line breaks ignored	Set `breaks: true` in options
XSS vulnerability concerns	Use DOMPurify to sanitize output

Working with `pandoc`

Prerequisites

Pandoc installed (download from https://pandoc.org/installing.html)
For PDF output: LaTeX installation (MacTeX on macOS, MiKTeX on Windows, texlive on Linux)
Terminal/command prompt access

Quick Conversion Methods

Method 1: CLI Basic Conversion

# Convert markdown to HTML
pandoc input.md -o output.html

# Convert with standalone document (includes header/footer)
pandoc input.md -s -o output.html

# Explicit format specification
pandoc input.md -f markdown -t html -s -o output.html

Method 2: Filter Mode (Interactive)

# Start pandoc as a filter
pandoc

# Type markdown, then Ctrl-D (Linux/macOS) or Ctrl-Z+Enter (Windows)
Hello *pandoc*!
# Output: <p>Hello <em>pandoc</em>!</p>

Method 3: Format Conversion

# HTML to Markdown
pandoc -f html -t markdown input.html -o output.md

# Markdown to LaTeX
pandoc input.md -s -o output.tex

# Markdown to PDF (requires LaTeX)
pandoc input.md -s -o output.pdf

# Markdown to Word
pandoc input.md -s -o output.docx

CLI Configuration

Option	Description
`-f, --from <format>`	Input format (markdown, html, latex, etc.)
`-t, --to <format>`	Output format (html, latex, pdf, docx, etc.)
`-s, --standalone`	Produce standalone document with header/footer
`-o, --output <file>`	Output file (inferred from extension)
`--mathml`	Convert TeX math to MathML
`--metadata title="Title"`	Set document metadata
`--toc`	Include table of contents
`--template <file>`	Use custom template
`--help`	Show all options

Security Warning

⚠️ Pandoc processes input faithfully. When converting untrusted markdown:

Use --sandbox mode to disable external file access
Validate input before processing
Sanitize HTML output if displayed in browsers

# Run in sandbox mode for untrusted input
pandoc --sandbox input.md -o output.html

Supported Markdown Flavors

Flavor	Support
Pandoc Markdown	100% (native)
CommonMark	Full (use `-f commonmark`)
GitHub Flavored Markdown	Full (use `-f gfm`)
MultiMarkdown	Partial

Troubleshooting

Issue	Solution
PDF generation fails	Install LaTeX (MacTeX, MiKTeX, or texlive)
Encoding issues on Windows	Run `chcp 65001` before using pandoc
Missing standalone headers	Add `-s` flag for complete documents
Math not rendering	Use `--mathml` or `--mathjax` option
Tables not rendering	Ensure proper table syntax with pipes and dashes

Working with `gomarkdown/markdown`

Prerequisites

Go 1.18 or higher installed
Install the library: go get github.com/gomarkdown/markdown
For CLI tool: go install github.com/gomarkdown/mdtohtml@latest

Quick Conversion Methods

Method 1: Simple Conversion (Go)

package main

import (
    "fmt"
    "github.com/gomarkdown/markdown"
)

func main() {
    md := []byte("# Hello World\n\nThis is **bold** text.")
    html := markdown.ToHTML(md, nil, nil)
    fmt.Println(string(html))
}

Method 2: CLI Tool

# Install mdtohtml
go install github.com/gomarkdown/mdtohtml@latest

# Convert file
mdtohtml input.md output.html

# Convert file (output to stdout)
mdtohtml input.md

Method 3: Custom Parser and Renderer

package main

import (
    "github.com/gomarkdown/markdown"
    "github.com/gomarkdown/markdown/html"
    "github.com/gomarkdown/markdown/parser"
)

func mdToHTML(md []byte) []byte {
    // Create parser with extensions
    extensions := parser.CommonExtensions | parser.AutoHeadingIDs | parser.NoEmptyLineBeforeBlock
    p := parser.NewWithExtensions(extensions)
    doc := p.Parse(md)

    // Create HTML renderer with extensions
    htmlFlags := html.CommonFlags | html.HrefTargetBlank
    opts := html.RendererOptions{Flags: htmlFlags}
    renderer := html.NewRenderer(opts)

    return markdown.Render(doc, renderer)
}

CLI Configuration

The mdtohtml CLI tool has minimal options:

mdtohtml input-file [output-file]

For advanced configuration, use the Go library programmatically with parser and renderer options:

Parser Extension	Description
`parser.CommonExtensions`	Tables, fenced code, autolinks, strikethrough, etc.
`parser.AutoHeadingIDs`	Generate IDs for headings
`parser.NoEmptyLineBeforeBlock`	No blank line needed before blocks
`parser.MathJax`	MathJax support for LaTeX math

HTML Flag	Description
`html.CommonFlags`	Common HTML output flags
`html.HrefTargetBlank`	Add `target="_blank"` to links
`html.CompletePage`	Generate complete HTML page
`html.UseXHTML`	Generate XHTML output

Security Warning

⚠️ gomarkdown does NOT sanitize output HTML. For untrusted input, use Bluemonday:

import (
    "github.com/microcosm-cc/bluemonday"
    "github.com/gomarkdown/markdown"
)

maybeUnsafeHTML := markdown.ToHTML(md, nil, nil)
html := bluemonday.UGCPolicy().SanitizeBytes(maybeUnsafeHTML)

Recommended sanitizer: Bluemonday

Supported Markdown Flavors

Flavor	Support
Original Markdown	100%
CommonMark	High (with extensions)
GitHub Flavored Markdown	High (tables, fenced code, strikethrough)
MathJax/LaTeX Math	Supported via extension
Mmark	Supported

Troubleshooting

Issue	Solution
Windows/Mac newlines not parsed	Use `parser.NormalizeNewlines(input)`
Tables not rendering	Enable `parser.Tables` extension
Code blocks without highlighting	Integrate with syntax highlighter like Chroma
Math not rendering	Enable `parser.MathJax` extension
XSS vulnerabilities	Use Bluemonday to sanitize output

Working with `jekyll`

Prerequisites

Ruby version 2.7.0 or higher
RubyGems
GCC and Make (for native extensions)
Install Jekyll and Bundler: gem install jekyll bundler

Quick Conversion Methods

Method 1: Create New Site

# Create a new Jekyll site
jekyll new myblog

# Change to site directory
cd myblog

# Build and serve locally
bundle exec jekyll serve

# Access at http://localhost:4000

Method 2: Build Static Site

# Build site to _site directory
bundle exec jekyll build

# Build with production environment
JEKYLL_ENV=production bundle exec jekyll build

Method 3: Live Reload Development

# Serve with live reload
bundle exec jekyll serve --livereload

# Serve with drafts
bundle exec jekyll serve --drafts

CLI Configuration

Command	Description
`jekyll new <path>`	Create new Jekyll site
`jekyll build`	Build site to `_site` directory
`jekyll serve`	Build and serve locally
`jekyll clean`	Remove generated files
`jekyll doctor`	Check for configuration issues

Serve Options	Description
`--livereload`	Reload browser on changes
`--drafts`	Include draft posts
`--port <port>`	Set server port (default: 4000)
`--host <host>`	Set server host (default: localhost)
`--baseurl <url>`	Set base URL

Security Warning

⚠️ Jekyll security considerations:

Avoid using safe: false in production
Use exclude in _config.yml to prevent sensitive files from being published
Sanitize user-generated content if accepting external input
Keep Jekyll and plugins updated

# _config.yml security settings
exclude:
  - Gemfile
  - Gemfile.lock
  - node_modules
  - vendor

Supported Markdown Flavors

Flavor	Support
Kramdown (default)	100%
CommonMark	Via plugin (jekyll-commonmark)
GitHub Flavored Markdown	Via plugin (jekyll-commonmark-ghpages)
RedCarpet	Via plugin (deprecated)

Configure markdown processor in _config.yml:

markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge

Troubleshooting

Issue	Solution
Ruby 3.0+ fails to serve	Run `bundle add webrick`
Gem dependency errors	Run `bundle install`
Slow builds	Use `--incremental` flag
Liquid syntax errors	Check for unescaped `{` in content
Plugin not loading	Add to `_config.yml` plugins list

Working with `hugo`

Prerequisites

Hugo installed (download from https://gohugo.io/installation/)
Git (recommended for themes and modules)
Go (optional, for Hugo Modules)

Quick Conversion Methods

Method 1: Create New Site

# Create a new Hugo site
hugo new site mysite

# Change to site directory
cd mysite

# Add a theme
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke
echo "theme = 'ananke'" >> hugo.toml

# Create content
hugo new content posts/my-first-post.md

# Start development server
hugo server -D

Method 2: Build Static Site

# Build site to public directory
hugo

# Build with minification
hugo --minify

# Build for specific environment
hugo --environment production

Method 3: Development Server

# Start server with drafts
hugo server -D

# Start with live reload and bind to all interfaces
hugo server --bind 0.0.0.0 --baseURL http://localhost:1313/

# Start with specific port
hugo server --port 8080

CLI Configuration

Command	Description
`hugo new site <name>`	Create new Hugo site
`hugo new content <path>`	Create new content file
`hugo`	Build site to `public` directory
`hugo server`	Start development server
`hugo mod init`	Initialize Hugo Modules

Build Options	Description
`-D, --buildDrafts`	Include draft content
`-E, --buildExpired`	Include expired content
`-F, --buildFuture`	Include future-dated content
`--minify`	Minify output
`--gc`	Run garbage collection after build
`-d, --destination <path>`	Output directory

Server Options	Description
`--bind <ip>`	Interface to bind to
`-p, --port <port>`	Port number (default: 1313)
`--liveReloadPort <port>`	Live reload port
`--disableLiveReload`	Disable live reload
`--navigateToChanged`	Navigate to changed content

Security Warning

⚠️ Hugo security considerations:

Configure security policy in hugo.toml for external commands
Use --enableGitInfo carefully with public repositories
Validate shortcode parameters for user-generated content

# hugo.toml security settings
[security]
  enableInlineShortcodes = false
  [security.exec]
    allow = ['^go$', '^npx$', '^postcss$']
  [security.funcs]
    getenv = ['^HUGO_', '^CI$']
  [security.http]
    methods = ['(?i)GET|POST']
    urls = ['.*']

Supported Markdown Flavors

Flavor	Support
Goldmark (default)	100% (CommonMark compliant)
GitHub Flavored Markdown	Full (tables, strikethrough, autolinks)
CommonMark	100%
Blackfriday (legacy)	Deprecated, not recommended

Configure markdown in hugo.toml:

[markup]
  [markup.goldmark]
    [markup.goldmark.extensions]
      definitionList = true
      footnote = true
      linkify = true
      strikethrough = true
      table = true
      taskList = true
    [markup.goldmark.renderer]
      unsafe = false  # Set true to allow raw HTML

Troubleshooting

Issue	Solution
"Page not found" on paths	Check `baseURL` in config
Theme not loading	Verify theme in `themes/` or Hugo Modules
Slow builds	Use `--templateMetrics` to identify bottlenecks
Raw HTML not rendering	Set `unsafe = true` in goldmark config
Images not loading	Check `static/` folder structure
Module errors	Run `hugo mod tidy`

References

Files

ATTRIBUTION.mdAdded by AutoGineer861 B
LICENSELicence file added by AutoGineer1.0 KiB
SKILL.md24.1 KiB
references/basic-markdown-to-html.md4.2 KiB
references/basic-markdown.md30.7 KiB
references/code-blocks-to-html.md2.6 KiB
references/code-blocks.md3.7 KiB
references/collapsed-sections-to-html.md2.5 KiB
references/collapsed-sections.md2.7 KiB
references/gomarkdown.md6.1 KiB
references/hugo.md6.9 KiB
references/jekyll.md5.6 KiB
references/marked.md2.9 KiB
references/pandoc.md4.0 KiB
references/tables-to-html.md2.6 KiB
references/tables.md3.7 KiB
references/writing-mathematical-expressions-to-html.md5.9 KiB
references/writing-mathematical-expressions.md4.8 KiB

references/basic-markdown.md

Basic writing and formatting syntax

Create sophisticated formatting for your prose and code on GitHub with simple syntax.

Headings

To create a heading, add one to six <kbd>#</kbd> symbols before your heading text. The number of <kbd>#</kbd> you use will determine the hierarchy level and typeface size of the heading.

# A first-level heading
## A second-level heading
### A third-level heading

Image: Screenshot of rendered GitHub Markdown showing sample h1, h2, and h3 headers, which descend in type size and visual weight to show hierarchy level.

When you use two or more headings, GitHub automatically generates a table of contents that you can access by clicking the "Outline" menu icon <svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-list-unordered" aria-label="Table of Contents" role="img"><path d="M5.75 2.5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5Zm0 5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5Zm0 5h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1 0-1.5ZM2 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-6a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM2 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg> within the file header. Each heading title is listed in the table of contents and you can click a title to navigate to the selected section.

Image: Screenshot of a README file with the drop-down menu for the table of contents exposed. The table of contents icon is outlined in dark orange.

Styling text

You can indicate emphasis with bold, italic, strikethrough, subscript, or superscript text in comment fields and .md files.

Style	Syntax	Keyboard shortcut	Example	Output
Bold	` ` or `__ __`	<kbd>Command</kbd>+<kbd>B</kbd> (Mac) or <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux)	`This is bold text`	This is bold text
Italic	`* *` or `_ _`	<kbd>Command</kbd>+<kbd>I</kbd> (Mac) or <kbd>Ctrl</kbd>+<kbd>I</kbd> (Windows/Linux)	`_This text is italicized_`	This text is italicized
Strikethrough	`~~ ~~` or `~ ~`	None	`~~This was mistaken text~~`	~~This was mistaken text~~
Bold and nested italic	` ` and `_ _`	None	`This text is _extremely_ important`	This text is extremely important
All bold and italic	`* *`	None	`*All this text is important*`	All this text is important	<!-- markdownlint-disable-line emphasis-style -->
Subscript	`<sub> </sub>`	None	`This is a <sub>subscript</sub> text`	This is a <sub>subscript</sub> text
Superscript	`<sup> </sup>`	None	`This is a <sup>superscript</sup> text`	This is a <sup>superscript</sup> text
Underline	`<ins> </ins>`	None	`This is an <ins>underlined</ins> text`	This is an <ins>underlined</ins> text

Quoting text

You can quote text with a <kbd>></kbd>.

Text that is not a quote

> Text that is a quote

Quoted text is indented with a vertical line on the left and displayed using gray type.

Image: Screenshot of rendered GitHub Markdown showing the difference between normal and quoted text.

[!NOTE] When viewing a conversation, you can automatically quote text in a comment by highlighting the text, then typing <kbd>R</kbd>. You can quote an entire comment by clicking <svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-kebab-horizontal" aria-label="The horizontal kebab icon" role="img"><path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path></svg>, then Quote reply. For more information about keyboard shortcuts, see Keyboard shortcuts.

Quoting code

You can call out code or a command within a sentence with single backticks. The text within the backticks will not be formatted. You can also press the <kbd>Command</kbd>+<kbd>E</kbd> (Mac) or <kbd>Ctrl</kbd>+<kbd>E</kbd> (Windows/Linux) keyboard shortcut to insert the backticks for a code block within a line of Markdown.

Use `git status` to list all new or modified files that haven't yet been committed.

Image: Screenshot of rendered GitHub Markdown showing that characters surrounded by backticks are shown in a fixed-width typeface, highlighted in light gray.

To format code or text into its own distinct block, use triple backticks.

Some basic Git commands are:
```
git status
git add
git commit
```

Image: Screenshot of rendered GitHub Markdown showing a simple code block without syntax highlighting.

For more information, see Creating and highlighting code blocks.

If you are frequently editing code snippets and tables, you may benefit from enabling a fixed-width font in all comment fields on GitHub. For more information, see About writing and formatting on GitHub.

Supported color models

In issues, pull requests, and discussions, you can call out colors within a sentence by using backticks. A supported color model within backticks will display a visualization of the color.

The background color is `#ffffff` for light mode and `#000000` for dark mode.

Image: Screenshot of rendered GitHub Markdown showing how HEX values within backticks create small circles of color, here white and then black.

Here are the currently supported color models.

Color	Syntax	Example	Output
HEX	<code>`#RRGGBB`</code>	<code>`#0969DA`</code>	Image: Screenshot of rendered GitHub Markdown showing how HEX value #0969DA appears with a blue circle.
RGB	<code>`rgb(R,G,B)`</code>	<code>`rgb(9, 105, 218)`</code>	Image: Screenshot of rendered GitHub Markdown showing how RGB value 9, 105, 218 appears with a blue circle.
HSL	<code>`hsl(H,S,L)`</code>	<code>`hsl(212, 92%, 45%)`</code>	Image: Screenshot of rendered GitHub Markdown showing how HSL value 212, 92%, 45% appears with a blue circle.

[!NOTE]
A supported color model cannot have any leading or trailing spaces within the backticks.
The visualization of the color is only supported in issues, pull requests, and discussions.

Links

You can create an inline link by wrapping link text in brackets [ ], and then wrapping the URL in parentheses ( ). You can also use the keyboard shortcut <kbd>Command</kbd>+<kbd>K</kbd> to create a link. When you have text selected, you can paste a URL from your clipboard to automatically create a link from the selection.

You can also create a Markdown hyperlink by highlighting the text and using the keyboard shortcut <kbd>Command</kbd>+<kbd>V</kbd>. If you'd like to replace the text with the link, use the keyboard shortcut <kbd>Command</kbd>+<kbd>Shift</kbd>+<kbd>V</kbd>.

This site was built using [GitHub Pages](https://pages.github.com/).

Image: Screenshot of rendered GitHub Markdown showing how text within brackets, "GitHub Pages," appears as a blue hyperlink.

[!NOTE] GitHub automatically creates links when valid URLs are written in a comment. For more information, see Autolinked references and URLs.

Section links

You can link directly to any section that has a heading. To view the automatically generated anchor in a rendered file, hover over the section heading to expose the <svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-link" aria-label="the link" role="img"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg> icon and click the icon to display the anchor in your browser.

Image: Screenshot of a README for a repository. To the left of a section heading, a link icon is outlined in dark orange.

If you need to determine the anchor for a heading in a file you are editing, you can use the following basic rules:

Letters are converted to lower-case.
Spaces are replaced by hyphens (-). Any other whitespace or punctuation characters are removed.
Leading and trailing whitespace are removed.
Markup formatting is removed, leaving only the contents (for example, _italics_ becomes italics).
If the automatically generated anchor for a heading is identical to an earlier anchor in the same document, a unique identifier is generated by appending a hyphen and an auto-incrementing integer.

For more detailed information on the requirements of URI fragments, see RFC 3986: Uniform Resource Identifier (URI): Generic Syntax, Section 3.5.

The code block below demonstrates the basic rules used to generate anchors from headings in rendered content.

# Example headings

## Sample Section

## This'll be a _Helpful_ Section About the Greek Letter Θ!
A heading containing characters not allowed in fragments, UTF-8 characters, two consecutive spaces between the first and second words, and formatting.

## This heading is not unique in the file

TEXT 1

## This heading is not unique in the file

TEXT 2

# Links to the example headings above

Link to the sample section: [Link Text](#sample-section).

Link to the helpful section: [Link Text](#thisll-be-a-helpful-section-about-the-greek-letter-Θ).

Link to the first non-unique section: [Link Text](#this-heading-is-not-unique-in-the-file).

Link to the second non-unique section: [Link Text](#this-heading-is-not-unique-in-the-file-1).

[!NOTE] If you edit a heading, or if you change the order of headings with "identical" anchors, you will also need to update any links to those headings as the anchors will change.

Relative links

You can define relative links and image paths in your rendered files to help readers navigate to other files in your repository.

A relative link is a link that is relative to the current file. For example, if you have a README file in root of your repository, and you have another file in docs/CONTRIBUTING.md, the relative link to CONTRIBUTING.md in your README might look like this:

[Contribution guidelines for this project](docs/CONTRIBUTING.md)

GitHub will automatically transform your relative link or image path based on whatever branch you're currently on, so that the link or path always works. The path of the link will be relative to the current file. Links starting with / will be relative to the repository root. You can use all relative link operands, such as ./ and ../.

Your link text should be on a single line. The example below will not work.

[Contribution
guidelines for this project](docs/CONTRIBUTING.md)

Relative links are easier for users who clone your repository. Absolute links may not work in clones of your repository - we recommend using relative links to refer to other files within your repository.

Custom anchors

You can use standard HTML anchor tags (<a name="unique-anchor-name"></a>) to create navigation anchor points for any location in the document. To avoid ambiguous references, use a unique naming scheme for anchor tags, such as adding a prefix to the name attribute value.

[!NOTE] Custom anchors will not be included in the document outline/Table of Contents.

You can link to a custom anchor using the value of the name attribute you gave the anchor. The syntax is exactly the same as when you link to an anchor that is automatically generated for a heading.

For example:

# Section Heading

Some body text of this section.

<a name="my-custom-anchor-point"></a>
Some text I want to provide a direct link to, but which doesn't have its own heading.

(… more content…)

[A link to that custom anchor](#my-custom-anchor-point)

[!TIP] Custom anchors are not considered by the automatic naming and numbering behavior of automatic heading links.

Line breaks

If you're writing in issues, pull requests, or discussions in a repository, GitHub will render a line break automatically:

This example
Will span two lines

However, if you are writing in an .md file, the example above would render on one line without a line break. To create a line break in an .md file, you will need to include one of the following:

Include two spaces at the end of the first line.
<pre> This example   Will span two lines </pre>
Include a backslash at the end of the first line.
```
This example\
Will span two lines
```
Include an HTML single line break tag at the end of the first line.
```
This example<br/>
Will span two lines
```

If you leave a blank line between two lines, both .md files and Markdown in issues, pull requests, and discussions will render the two lines separated by the blank line:

This example

Will have a blank line separating both lines

Images

You can display an image by adding <kbd>!</kbd> and wrapping the alt text in [ ]. Alt text is a short text equivalent of the information in the image. Then, wrap the link for the image in parentheses ().

![Screenshot of a comment on a GitHub issue showing an image, added in the Markdown, of an Octocat smiling and raising a tentacle.](https://myoctocat.com/assets/images/base-octocat.svg)

Image: Screenshot of a comment on a GitHub issue showing an image, added in the Markdown, of an Octocat smiling and raising a tentacle.

GitHub supports embedding images into your issues, pull requests, discussions, comments and .md files. You can display an image from your repository, add a link to an online image, or upload an image. For more information, see Uploading assets.

[!NOTE] When you want to display an image that is in your repository, use relative links instead of absolute links.

Here are some examples for using relative links to display an image.

Context	Relative Link
In a `.md` file on the same branch	`/assets/images/electrocat.png`
In a `.md` file on another branch	`/../main/assets/images/electrocat.png`
In issues, pull requests and comments of the repository	`../blob/main/assets/images/electrocat.png?raw=true`
In a `.md` file in another repository	`/../../../../github/docs/blob/main/assets/images/electrocat.png`
In issues, pull requests and comments of another repository	`../../../github/docs/blob/main/assets/images/electrocat.png?raw=true`

[!NOTE] The last two relative links in the table above will work for images in a private repository only if the viewer has at least read access to the private repository that contains these images.

For more information, see Relative Links.

The Picture element

The <picture> HTML element is supported.

Lists

You can make an unordered list by preceding one or more lines of text with <kbd>-</kbd>, <kbd>*</kbd>, or <kbd>+</kbd>.

- George Washington
* John Adams
+ Thomas Jefferson

Image: Screenshot of rendered GitHub Markdown showing a bulleted list of the names of the first three American presidents.

To order your list, precede each line with a number.

1. James Madison
2. James Monroe
3. John Quincy Adams

Image: Screenshot of rendered GitHub Markdown showing a numbered list of the names of the fourth, fifth, and sixth American presidents.

Nested Lists

You can create a nested list by indenting one or more list items below another item.

To create a nested list using the web editor on GitHub or a text editor that uses a monospaced font, like Visual Studio Code, you can align your list visually. Type space characters in front of your nested list item until the list marker character (<kbd>-</kbd> or <kbd>*</kbd>) lies directly below the first character of the text in the item above it.

1. First list item
   - First nested list item
     - Second nested list item

[!NOTE] In the web-based editor, you can indent or dedent one or more lines of text by first highlighting the desired lines and then using <kbd>Tab</kbd> or <kbd>Shift</kbd>+<kbd>Tab</kbd> respectively.

Image: Screenshot of Markdown in Visual Studio Code showing indentation of nested numbered lines and bullets.

Image: Screenshot of rendered GitHub Markdown showing a numbered item followed by nested bullets at two different levels of nesting.

To create a nested list in the comment editor on GitHub, which doesn't use a monospaced font, you can look at the list item immediately above the nested list and count the number of characters that appear before the content of the item. Then type that number of space characters in front of the nested list item.

In this example, you could add a nested list item under the list item 100. First list item by indenting the nested list item a minimum of five spaces, since there are five characters (100. ) before First list item.

100. First list item
     - First nested list item

Image: Screenshot of rendered GitHub Markdown showing a numbered item prefaced by the number 100 followed by a bulleted item nested one level.

You can create multiple levels of nested lists using the same method. For example, because the first nested list item has seven characters (␣␣␣␣␣-␣) before the nested list content First nested list item, you would need to indent the second nested list item by at least two more characters (nine spaces minimum).

100. First list item
     - First nested list item
       - Second nested list item

Image: Screenshot of rendered GitHub Markdown showing a numbered item prefaced by the number 100 followed by bullets at two different levels of nesting.

For more examples, see the GitHub Flavored Markdown Spec.

Task lists

To create a task list, preface list items with a hyphen and space followed by [ ]. To mark a task as complete, use [x].

- [x] #739
- [ ] https://github.com/octo-org/octo-repo/issues/740
- [ ] Add delight to the experience when all tasks are complete :tada:

Image: Screenshot showing the rendered version of the markdown. The references to issues are rendered as issue titles.

If a task list item description begins with a parenthesis, you'll need to escape it with <kbd>\</kbd>:

- [ ] \(Optional) Open a followup issue

For more information, see About tasklists.

Mentioning people and teams

You can mention a person or team on GitHub by typing <kbd>@</kbd> plus their username or team name. This will trigger a notification and bring their attention to the conversation. People will also receive a notification if you edit a comment to mention their username or team name. For more information about notifications, see About notifications.

[!NOTE] A person will only be notified about a mention if the person has read access to the repository and, if the repository is owned by an organization, the person is a member of the organization.

@github/support What do you think about these updates?

Image: Screenshot of rendered GitHub Markdown showing how the team mention "@github/support" renders as bold, clickable text.

When you mention a parent team, members of its child teams also receive notifications, simplifying communication with multiple groups of people. For more information, see About organization teams.

Typing an <kbd>@</kbd> symbol will bring up a list of people or teams on a project. The list filters as you type, so once you find the name of the person or team you are looking for, you can use the arrow keys to select it and press either tab or enter to complete the name. For teams, enter the @organization/team-name and all members of that team will get subscribed to the conversation.

The autocomplete results are restricted to repository collaborators and any other participants on the thread.

Referencing issues and pull requests

You can bring up a list of suggested issues and pull requests within the repository by typing <kbd>#</kbd>. Type the issue or pull request number or title to filter the list, and then press either tab or enter to complete the highlighted result.

For more information, see Autolinked references and URLs.

Referencing external resources

If custom autolink references are configured for a repository, then references to external resources, like a JIRA issue or Zendesk ticket, convert into shortened links. To know which autolinks are available in your repository, contact someone with admin permissions to the repository. For more information, see Configuring autolinks to reference external resources.

Uploading assets

You can upload assets like images by dragging and dropping, selecting from a file browser, or pasting. You can upload assets to issues, pull requests, comments, and .md files in your repository.

Using emojis

You can add emoji to your writing by typing :EMOJICODE:, a colon followed by the name of the emoji.

@octocat :+1: This PR looks great - it's ready to merge! :shipit:

Image: Screenshot of rendered GitHub Markdown showing how emoji codes for +1 and shipit render visually as emoji.

Typing <kbd>:</kbd> will bring up a list of suggested emoji. The list will filter as you type, so once you find the emoji you're looking for, press Tab or Enter to complete the highlighted result.

For a full list of available emoji and codes, see the Emoji-Cheat-Sheet.

Paragraphs

You can create a new paragraph by leaving a blank line between lines of text.

Footnotes

You can add footnotes to your content by using this bracket syntax:

Here is a simple footnote[^1].

A footnote can also have multiple lines[^2].

[^1]: My reference.
[^2]: To add line breaks within a footnote, add 2 spaces to the end of a line.  
This is a second line.

The footnote will render like this:

Image: Screenshot of rendered Markdown showing superscript numbers used to indicate footnotes, along with optional line breaks inside a note.

[!NOTE] The position of a footnote in your Markdown does not influence where the footnote will be rendered. You can write a footnote right after your reference to the footnote, and the footnote will still render at the bottom of the Markdown. Footnotes are not supported in wikis.

Alerts

Alerts, also sometimes known as callouts or admonitions, are a Markdown extension based on the blockquote syntax that you can use to emphasize critical information. On GitHub, they are displayed with distinctive colors and icons to indicate the significance of the content.

Use alerts only when they are crucial for user success and limit them to one or two per article to prevent overloading the reader. Additionally, you should avoid placing alerts consecutively. Alerts cannot be nested within other elements.

To add an alert, use a special blockquote line specifying the alert type, followed by the alert information in a standard blockquote. Five types of alerts are available:

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

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

Here are the rendered alerts:

Image: Screenshot of rendered Markdown alerts showing how Note, Tip, Important, Warning, and Caution render with different colored text and icons.

Hiding content with comments

You can tell GitHub to hide content from the rendered Markdown by placing the content in an HTML comment.

<!-- This content will not appear in the rendered Markdown -->

Ignoring Markdown formatting

You can tell GitHub to ignore (or escape) Markdown formatting by using <kbd>\</kbd> before the Markdown character.

Let's rename \*our-new-project\* to \*our-old-project\*.

Image: Screenshot of rendered GitHub Markdown showing how backslashes prevent the conversion of asterisks to italics.

For more information on backslashes, see Daring Fireball's Markdown Syntax.

[!NOTE] The Markdown formatting will not be ignored in the title of an issue or a pull request.

Disabling Markdown rendering

When viewing a Markdown file, you can click Code at the top of the file to disable Markdown rendering and view the file's source instead.

Image: Screenshot of a Markdown file in a repository showing options for interacting with the file. A button, labeled "Code", is outlined in dark orange.

Disabling Markdown rendering enables you to use source view features, such as line linking, which is not possible when viewing rendered Markdown files.

Requirements and compatibility

Written for: GitHub Copilot

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs a command-line tool, Needs Node.js

Security

What our scanner noticed· Low risk

Instructions that use the network

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

First committed by

jhauga

Publisher

GitHub (Official)

Distributed by

GitHub

Source

github/awesome-copilot · skills/markdown-to-html · commit 797337f

Licence

MIT License (redistribution allowed)

LICENSE (added by AutoGineer from LICENSE)
ATTRIBUTION.md (written by AutoGineer)

Synced

2026-11-09

Contributors

jhauga

AutoGineer is not affiliated with or endorsed by jhauga or GitHub.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download markdown-to-html.zip

From the author

AutoGineer summary

What it does

When to use it

Advantages

Usage examples

Install

Documentation by jhauga

Markdown to HTML Conversion

When to Use This Skill

Converting Markdown to HTML

Essential Basic Conversions

Code Block Conversions

Collapsed Section Conversions

Mathematical Expression Conversions

Table Conversions

Working with markedJS/marked

Prerequisites

Quick Conversion Methods

Step-by-Step Workflows

CLI Configuration

Using Config Files

CLI Options Reference

Security Warning

Supported Markdown Flavors

Troubleshooting

Working with pandoc

Prerequisites

Quick Conversion Methods

Method 1: CLI Basic Conversion

Method 2: Filter Mode (Interactive)

Method 3: Format Conversion

CLI Configuration

Security Warning

Supported Markdown Flavors

Troubleshooting

Working with gomarkdown/markdown

Prerequisites

Quick Conversion Methods

Method 1: Simple Conversion (Go)

Method 2: CLI Tool

Method 3: Custom Parser and Renderer

CLI Configuration

Security Warning

Supported Markdown Flavors

Troubleshooting

Working with jekyll

Prerequisites

Quick Conversion Methods

Method 1: Create New Site

Method 2: Build Static Site

Method 3: Live Reload Development

CLI Configuration

Security Warning

Supported Markdown Flavors

Troubleshooting

Working with hugo

Prerequisites

Quick Conversion Methods

Method 1: Create New Site

Method 2: Build Static Site

Method 3: Development Server

CLI Configuration

Security Warning

Supported Markdown Flavors

Troubleshooting

References

Writing and Styling Markdown

Files

references/basic-markdown.md

Basic writing and formatting syntax

Headings

Styling text

Quoting text

Quoting code

Supported color models

Links

Section links

Relative links

Custom anchors

Working with `markedJS/marked`

Working with `pandoc`

Working with `gomarkdown/markdown`

Working with `jekyll`

Working with `hugo`