GH Markdown Preview

https://github.com/yusukebe/gh-markdown-preview
Admin
GH Markdown Preview is a GitHub CLI extension that lets you preview Markdown documents with GitHub's...
Tokens:3,597
Snippets:47
Trust Score:9.7
License:MIT
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install gh-markdown-preview extension

Source: https://github.com/yusukebe/gh-markdown-preview/blob/master/README.md

Installs the extension using the GitHub CLI.

```bash
gh extension install yusukebe/gh-markdown-preview
```

--------------------------------

### Install and Upgrade Extension

Source: https://context7.com/yusukebe/gh-markdown-preview/llms.txt

Commands to install or update the gh-markdown-preview extension via the GitHub CLI.

```bash
# Install the extension
gh extension install yusukebe/gh-markdown-preview

# Upgrade to the latest version
gh extension upgrade markdown-preview
```

--------------------------------

### GET /

Source: https://context7.com/yusukebe/gh-markdown-preview/llms.txt

Serves the main HTML preview page with GitHub styling.

```APIDOC
## GET /

### Description
Serves the main HTML preview page with GitHub styling.

### Method
GET

### Endpoint
/

### Response
#### Success Response (200)
- **body** (HTML) - The rendered HTML page with GitHub styling.
```

--------------------------------

### Display Version Information

Source: https://context7.com/yusukebe/gh-markdown-preview/llms.txt

Check the currently installed version of the extension.

```bash
# Show version
gh markdown-preview --version
```

--------------------------------

### Upgrade gh-markdown-preview extension

Source: https://github.com/yusukebe/gh-markdown-preview/blob/master/README.md

Updates the installed extension to the latest version.

```bash
gh extension upgrade markdown-preview
```

--------------------------------

### GET /__/md

Source: https://context7.com/yusukebe/gh-markdown-preview/llms.txt

Returns the raw HTML body for a given markdown file.

```APIDOC
## GET /__/md

### Description
Returns the raw HTML body for a given markdown file.

### Method
GET

### Endpoint
/__/md

### Parameters
#### Query Parameters
- **path** (string) - Optional - The file path of the markdown file to render.

### Response
#### Success Response (200)
- **body** (HTML) - The raw HTML content of the rendered markdown.
```

--------------------------------

### View Help and Options

Source: https://context7.com/yusukebe/gh-markdown-preview/llms.txt

Display the full list of available command-line arguments and their defaults.

```bash
# Full help output
gh markdown-preview --help

# Options:
#     --dark-mode           Force dark mode
#     --markdown-mode       Force "markdown" mode (rather than default "gfm")
#     --disable-auto-open   Disable auto opening your browser
#     --disable-reload      Disable live reloading
# -h, --help                help for gh-markdown-preview
#     --host string         Hostname this server will bind (default "localhost")
#     --light-mode          Force light mode
# -p, --port int            TCP port number of this server (default 3333)
#     --verbose             Show verbose output
#     --version             Show the version
```

--------------------------------

### View command options

Source: https://github.com/yusukebe/gh-markdown-preview/blob/master/README.md

List of available flags and configuration options for the preview server.

```text
    --dark-mode           Force dark mode
    --markdown-mode       Force "markdown" mode (rather than default "gfm")
    --disable-auto-open   Disable auto opening your browser
    --disable-reload      Disable live reloading
-h, --help                help for gh-markdown-preview
    --host string         Hostname this server will bind (default "localhost")
    --light-mode          Force light mode
-p, --port int            TCP port number of this server (default 3333)
    --verbose             Show verbose output
    --version             Show the version
```

--------------------------------

### Configure Server Host and Port

Source: https://context7.com/yusukebe/gh-markdown-preview/llms.txt

Options to bind the local server to a specific hostname or custom port.

```bash
# Use a custom port
gh markdown-preview README.md --port 8080

# Bind to a specific hostname
gh markdown-preview README.md --host 0.0.0.0

# Combined host and port configuration
gh markdown-preview README.md --host 127.0.0.1 --port 9000
```

--------------------------------

### Preview Markdown from stdin

Source: https://github.com/yusukebe/gh-markdown-preview/blob/master/README.md

Methods for piping content or redirecting input to the previewer.

```bash
echo "# Hello" | gh markdown-preview
cat README.md | gh markdown-preview
gh markdown-preview - < README.md
```

--------------------------------

### Set Theme Mode

Source: https://context7.com/yusukebe/gh-markdown-preview/llms.txt

Force light or dark mode to override system preferences.

```bash
# Force dark mode
gh markdown-preview README.md --dark-mode

# Force light mode
gh markdown-preview README.md --light-mode

# Default: Uses system preference (prefers-color-scheme)
gh markdown-preview README.md
```

--------------------------------

### Enable Verbose Output

Source: https://context7.com/yusukebe/gh-markdown-preview/llms.txt

Display detailed debug information for troubleshooting.

```bash
# Enable verbose output for debugging
gh markdown-preview README.md --verbose
```

--------------------------------

### Preview Markdown files

Source: https://github.com/yusukebe/gh-markdown-preview/blob/master/README.md

Commands to preview specific files or automatically detect README files in the current directory.

```bash
gh markdown-preview README.md
```

```bash
gh markdown-preview
```

--------------------------------

### Toggle Rendering Mode

Source: https://context7.com/yusukebe/gh-markdown-preview/llms.txt

Switch between GitHub Flavored Markdown (default) and standard Markdown rendering.

```bash
# Default: GitHub Flavored Markdown mode
gh markdown-preview README.md

# Force standard markdown mode (disables GFM features)
gh markdown-preview README.md --markdown-mode
```

--------------------------------

### Markdown Loading and Rendering

Source: https://github.com/yusukebe/gh-markdown-preview/blob/master/cmd/template.html

Fetches Markdown content via AJAX and initializes Mermaid diagrams and copy buttons.

```javascript
function loadmd() { $.ajax({ url: "/__/md?path=" + window.location.pathname.slice(1), success: function (result) { $("#markdown-body").html(result).promise().done(function(){ var count = $("#markdown-body a").length; $("#markdown-body a").each(function(i){ var a = $(this); if (a.attr("id") != undefined ) { var id = a.attr("id").replace("user-content-", ""); a.attr("id", id); } if (i+1 === count) { if(location.hash) { var url = location.href; location.href = location.hash; history.replaceState(null,null,url); } } MathJax.typeset(); }); {{ if eq .Mode "dark" }} const mermaidJsTheme = 'dark'; {{ else if eq .Mode "light" }} const mermaidJsTheme = 'default'; {{ else }} const mermaidJsTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default'; {{ end }} mermaid.initialize({ startOnLoad: false, theme: mermaidJsTheme }); $('div.highlight-source-mermaid > pre').each(async function(i, pre) { const originalText = pre.textContent; const id = 'mermaid-diagram-' + i; try { const { svg } = await mermaid.render(id, originalText); $(pre).html(svg); // Store original text for copy functionality $(pre).data('original-text', originalText); // Add copy button after rendering const button = $(`<button class="copy-button" aria-label="Copy mermaid code to clipboard">${copyIcon}</button>`); $(pre).css("position", "relative").append(button); button.on('click', function () { navigator.clipboard.writeText(originalText).then(function () { button.html(tickIcon); setTimeout(() => { button.html(copyIcon) }, 1000); }, function () { alert('Failed to copy'); }); }); } catch (error) { console.error('Mermaid rendering error:', error); $(pre).html('<div style="color: red;">Error rendering diagram</div>'); } }); const copyIcon= `<svg class="copy-icon" aria-hidden="true" fill="none" height="18" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="18" style="color:"currentColor";"><path d="M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z"></path></svg>`; const tickIcon = `<svg class="tick-icon" aria-hidden="true" fill="none" height="18" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="18" style="color: "currentColor";"><path d="M5 13l4 4L19 7"></path></svg>`; $('.markdown-body pre').each(function () { const pre = $(this); // Skip if this is a Mermaid diagram (already has copy button) if ($(pre).closest('div.highlight-source-mermaid').length > 0) { return; } const code = pre.find('code'); const button = $(`<button class="copy-button" aria-label="Copy code to clipboard">${copyIcon}</button>`); pre.css("position", "relative"); pre.append(button); button.on('click', function () { // Get text from code element if it exists, otherwise from pre element directly const textToCopy = code.length > 0 ? code.text() : pre.text().replace(/Copy.*$/, '').trim(); navigator.clip
```

--------------------------------

### WS /ws

Source: https://context7.com/yusukebe/gh-markdown-preview/llms.txt

WebSocket endpoint for live reload functionality.

```APIDOC
## WS /ws

### Description
WebSocket endpoint used for live reload functionality to update the browser when files change.

### Method
WS

### Endpoint
/ws
```

--------------------------------

### Display Inline Code

Source: https://github.com/yusukebe/gh-markdown-preview/blob/master/testdata/markdown-demo.md

Use backticks to format text as inline code.

```markdown
`code`
```

--------------------------------

### WebSocket for Live Reloading

Source: https://github.com/yusukebe/gh-markdown-preview/blob/master/cmd/template.html

Establishes a WebSocket connection to a server for live markdown preview updates. Reloads the page when a 'reload' message is received.

```javascript
(function () { var reload = false {{if .Reload}} reload = true {{end}} if (reload) { var conn = new WebSocket("ws://{{.Host}}/ws") conn.onopen = function () { conn.send('Ping'); }; conn.onerror = function (e) { console.log("Connection error " + e); }; conn.onclose = function (e) { console.log("Connection closed " + e) } conn.onmessage = function (e) { if (e.data === "reload") { console.log("reload page!"); loadmd(); } } } loadmd(); })()
```

--------------------------------

### Dynamic CSS Injection Template

Source: https://github.com/yusukebe/gh-markdown-preview/blob/master/cmd/template.html

Uses Go template logic to select the appropriate GitHub Markdown CSS based on the current mode.

```html
{{ .Title }}  {{ $cssURL := "https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.6.1/github-markdown.min.css" }} {{ if eq .Mode "dark" }} {{ $cssURL = "https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.6.1/github-markdown-dark.min.css" }} {{ else if eq .Mode "light" }} {{ $cssURL = "https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.6.1/github-markdown-light.min.css" }}{{ end }}
```

--------------------------------

### Control Browser Auto-Open

Source: https://context7.com/yusukebe/gh-markdown-preview/llms.txt

Prevent the browser from opening automatically, useful for headless environments.

```bash
# Disable automatic browser opening
gh markdown-preview README.md --disable-auto-open

# Default: Browser opens automatically
gh markdown-preview README.md
```

--------------------------------

### MathJax Configuration

Source: https://github.com/yusukebe/gh-markdown-preview/blob/master/cmd/template.html

Configures MathJax for rendering LaTeX-style mathematical expressions.

```javascript
MathJax = { tex: { inlineMath: [ ['$', '$'], ['\\(', '\\)'], ], displayMath: [ ['$$', '$$'], ['\\[', '\\]'], ], }, }
```

--------------------------------

### Display Syntax Highlighted JavaScript

Source: https://github.com/yusukebe/gh-markdown-preview/blob/master/testdata/markdown-demo.md

Specify a language identifier after the opening backticks to enable syntax highlighting.

```javascript
``` js
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
```
```

--------------------------------

### Accessing GH Markdown Preview HTTP Endpoints

Source: https://context7.com/yusukebe/gh-markdown-preview/llms.txt

Use these curl commands to interact with the local server for rendering markdown or triggering live reloads.

```bash
# Main preview endpoint (serves rendered HTML page)
curl http://localhost:3333/

# Raw markdown-to-HTML endpoint (returns just the HTML body)
curl http://localhost:3333/__/md

# Raw HTML for a specific file path
curl "http://localhost:3333/__/md?path=docs/CONTRIBUTING.md"

# WebSocket endpoint for live reload (ws:// protocol)
# ws://localhost:3333/ws
```

--------------------------------

### Control Live Reloading

Source: https://context7.com/yusukebe/gh-markdown-preview/llms.txt

Disable the automatic browser refresh feature.

```bash
# Disable live reloading
gh markdown-preview README.md --disable-reload

# Default: Live reloading is enabled
gh markdown-preview README.md
```

--------------------------------

### Display Indented Code Block

Source: https://github.com/yusukebe/gh-markdown-preview/blob/master/testdata/markdown-demo.md

Indenting lines by four spaces creates a preformatted code block.

```text
    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code
```

--------------------------------

### Copy Text to Clipboard

Source: https://github.com/yusukebe/gh-markdown-preview/blob/master/cmd/template.html

Uses the Clipboard API to copy text. Includes visual feedback on the button and a timeout to revert the icon.

```javascript
board.writeText(textToCopy).then(function () { button.html(tickIcon); setTimeout(() => { button.html(copyIcon) }, 1000); }, function () { alert('Failed to copy'); }); }); }); })} }) };
```

--------------------------------

### Display Fenced Code Block

Source: https://github.com/yusukebe/gh-markdown-preview/blob/master/testdata/markdown-demo.md

Use triple backticks to create a fenced code block.

```text
```
Sample text here...
```
```
Tokens:
Raw