### 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 = $(``); $(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('
Error rendering diagram
'); } }); const copyIcon= ``; const tickIcon = ``; $('.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 = $(``); 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... ``` ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.