GitHub CLI extension to preview your markdown similar to the style of GitHub.

gh markdown-preview

GitHub CLI extension to preview your markdown similar to the style of GitHub :octocat:

gh markdown-preview is a GitHub CLI extension to preview your markdown such as README.md. The gh markdown-preview commnad start a local web server to serve your markdown document file with a GitHub stlye. gh markdown-preview show the HTML got from GitHub official markdown API with the CSS extracted from GitHub web site. The styles are almost the same!

Screenshot of gh markdown-preview

Installation

$ gh extension install yusukebe/gh-markdown-preview

Usage

The usage:

$ gh markdown-preview README.md

Then access the local web server such as http://localhost:3333 with Chrome, Firefox, or Safari.

Available options:

-p, --port            TCP port number of this server (default: 3333)

gh markdown-preview command

Related projects

Author

Yusuke Wada http://github.com/yusukebe

License

Distributed under the MIT License.

Comments
  • Live Reloading Not Working

    Live Reloading Not Working

    Both gh markdown-preview --reload gh markdown-preview -r are not working.

    I'm using Ubuntu with WSL, it wasn't working on Firefox on Windows. I opened the Linux version but that didn't work either. I also tried Edge and nothing.

    I'm editing my README.md inside Vim. I don't expect live changes but I expected changes everytime I save changes.

  • Usage with emacs for multiple files

    Usage with emacs for multiple files

    This is not an issue.

    It's more of a thank you and a rudimentary emacs usage as I found this extension much more helpfull than using pandoc with emacs markdown mode on *nix like systems. I use this on Ubuntu 20.04.3 LTS and GNU Emacs 26.3.

    Feel free to comment or just close this issue as you see fit.

    To use this gh extension with emacs:

    1. insert into the .emacs file (or equivalent):
    (defun md_preview ()
      "start /usr/bin/gh markdown-preview -p PORT <current buffer file>"
      (interactive)
      (let (PORT BFN BFN_PORT)
        (setq PORT (read-string "PORT: " nil nil "3333"))  
        (setq BFN (buffer-file-name))
        (setq BFN_PORT (concat BFN ":" PORT))
        (start-process "gh_markdown_preview" BFN_PORT "/usr/bin/gh" "markdown-preview" "-p" PORT BFN)))
    
    (global-set-key [(control ?x) (p)] 'md_preview)
    
    1. restart emacs and open a couple of markdown files.
    2. to preview a buffer with a markdown file by using a web browser and the url http://localhost:3333: in emacs "C-x p" RET (to use the default port 3333)
    3. to preview a second buffer with a different markdown file in a web browser and the url http://localhost:3334: in emacs "C-x p" 3334 RET (or any port that isn't in use such as 3333 in this example)
    4. the lisp code above will put output from the gh markdown-preview instances into separate buffers named like /path/to/markdown-file.md:3333, /path/to/different-markdown-file.md:3334, etc. in emacs
    5. close the /path/to/markdown-file.md:3333 emacs buffer to exit the preview processes on port 3333 (and free the port)

    This emacs implementation has shortcomings: A. The user must keep track of what port is open and available for use B. I'm not sure if this is the best solution if one is editing several hundred md files. I only edit a handful so I suspect it will work just fine for that. C. While I've used emacs for some time, the above is a first attempt at coding lisp. It works for me but there are likely many more shortcomings than A & B above. Treat this a place to start, not an end point.

    HTH

    and thanks again - it's really handy.

    EDITs - the original code posted didn't work. The code above does, is a bit simpler, and perhaps makes it easier to keep track of what markdown file is being displayed on what port.

  • Inconvenient URL output on startup

    Inconvenient URL output on startup

    I'm on current Arch Linux with the current version of gh and this extension. On start, it outputs:

    $ gh markdown-preview README.md
    2022/04/07 15:27:37 Accepting connections at http://*:3333/
    2022/04/07 15:27:37 Open http://*:3333/ on your browser
    2022/04/07 15:27:37 GET [200] /
    2022/04/07 15:27:37 Watching README.md for changes
    2022/04/07 15:27:37 GET [404] /favicon.ico
    2022/04/07 15:27:38 GET [200] /__/md
    

    All other similar utilities (i.e grip for a specific example) that create a local web-server output a valid click-able URL in the terminal which you can just click on to conveniently jump to in your browser. I know the browser is automatically opened the first time but you may want to open it a second/later time. So please change that http://*:3333/ to http://localhost:3333/.

    I suspect you may want to argue that http://*:3333/ informs the user that the port is opened globally but, as possibly another issue, I suggest from a security/privacy standpoint that the port should only be opened locally (i.e. on localhost) by default anyhow. Add another option -g/--global and thus for the rare case when a user needs this he obviously already knows what URL to use.

    I've previously used grip but it has some annoying failures (currently broken with a Python error on Arch Linux) so I am looking for an alternative.

  • feat: add the `--host` option

    feat: add the `--host` option

    The user can specify the hostname the server will bind with a --host option. The default value is localhost.

    Usage:

    $ gh markdown-preview --host 192.168.3.3
    

    Outputs:

    2022/04/07 18:29:49 Accepting connections at http://192.168.3.3:3333/
    2022/04/07 18:29:49 Open http://192.168.3.3:3333/ on your browser
    

    If locahost is set, you can't access it from the other global address.

  • Do not open the browser automatically if the file is not found

    Do not open the browser automatically if the file is not found

    If the markdown file specified by the command line does not exist, "gh-markdown-preview" should not open a browser. Now, it will open automatically.

    SS

  • Throw Error if README.md does not exists

    Throw Error if README.md does not exists

    Currently, the "gh-markdown-preview" starts and prints Open http://* on your browser, although markdown file is not specified in the current directory and REAMDE.md does not exist. CLI should throw "Not Found" error.

  • WebSocket Error

    WebSocket Error

    With --reload option, error has been happened.

    2021/12/02 04:19:52 Change detected in README.md, refreshing
    2021/12/02 04:19:52 Change detected in README.md, refreshing
    2021/12/02 04:19:52 error:websocket: close sent
    
  • Anchor Tag Not Working

    Anchor Tag Not Working

    When gh-markdown-preview creates anchor tags it adds "user-content-" to the id.

    For example, if the user creates a markdown header called "My Anchor", gh-markdown-preview set the id to "user-content-my-anchor" instead of "my-anchor".

  • Support `#gh-dark-mode-only` and `#gh-light-mode-only`

    Support `#gh-dark-mode-only` and `#gh-light-mode-only`

    See the GitHub docs and this article for an explanation of #gh-dark-mode-only and #gh-light-mode-only.

    You can use this repo of mine, which uses this feature, to test this functionality if you'd like.

    Here is what my repo looks like in gh-markdown-preview:

    Click to expand

    Screen Shot 2022-10-13 at 21 34 21

    And here is what it looks like rendered on GitHub:

    Click to expand

    Screen Shot 2022-10-13 at 21 37 27

  • Add --export option like grip

    Add --export option like grip

    Sometimes you just want to render a markdown file directly to a HTML file. grip provides an option to do this:

    grip --export README.html
    

    For this case, no server is started, no browser tab is opened, etc. Also can specify '-' for stdout.

    Can this option please be added here?

  • it can not used on Windows

    it can not used on Windows

    >gh  markdown-preview test.md
    --: C:\Users\lenovo\AppData\Local\GitHub CLI\extensions\gh-markdown-preview\gh-markdown-preview: /usr/bin/env: bad interpreter: Permission denied
    
  • Prepare default `/favicon.ico` ?

    Prepare default `/favicon.ico` ?

    In most cases, there is no favicon.ico in our directory and it will be 404 not found. How about preparing the default favicon.ico and showing it as /favicon.ico.

    SS

Preview media files in the shell
Preview media files in the shell

ffcat Output per stream preview directly in terminal. Supports image, audio and video files. Currently can only output via iTerm2 control codes. Be aw

Dec 17, 2022
Xopopu - Export csv to json for web preview

xopopu Diagram English Document La idea es crear una herramienta de backend que

Feb 2, 2022
GitHub CLI extension to create and revoke installation tokens

GitHub CLI extension to create and revoke installation tokens.

Nov 22, 2021
Github cli extension to approve or reject pending deployments that are waiting for review.

gh-deploy A gh cli extension to approve or reject pending deployments that are waiting for review. Installation Installation requires a minimum versio

Nov 2, 2022
A GitHub CLI extension to view and generate license files.

gh-license A GitHub CLI extension to view and generate license files. All license information is obtained from the GitHub API. NOTE: The only purpose

Oct 8, 2022
GitHub CLI extension to clone (or update) all repositories in an Organization, with the ability to filter via search queries.

gh-org-repo-sync GitHub CLI extension to clone all repositories in an Organization, with the ability to filter via search queries. If a local clone al

Nov 2, 2022
Clirunner - Package clirunner runs a legacy shell-style CLI as if a human were running it.

clirunner Package clirunner runs a legacy shell-style command-line interpreter (CLI) as if a human were running it. A shell-style CLI offers a prompt

Jan 4, 2022
Advanced ANSI style & color support for your terminal applications
Advanced ANSI style & color support for your terminal applications

termenv lets you safely use advanced styling options on the terminal. It gathers information about the terminal environment in terms of its ANSI & col

Dec 31, 2022
A simple CLI app to take notes daily on markdown file
A simple CLI app to take notes daily on markdown file

A simple CLI app to take notes daily on markdown file

Jul 29, 2022
Command line XML beautifier and content extractor. Similar to jq.
Command line XML beautifier and content extractor. Similar to jq.

Command line XML beautifier and content extractor. Similar to jq.

Dec 25, 2022
Trzsz-go - A simple file transfer tools, similar to lrzsz ( rz / sz ), and compatible with tmux

Trzsz-go - A simple file transfer tools, similar to lrzsz ( rz / sz ), and compatible with tmux

Dec 31, 2022
Drop-in replacement for Go's flag package, implementing POSIX/GNU-style --flags.

Description pflag is a drop-in replacement for Go's flag package, implementing POSIX/GNU-style --flags. pflag is compatible with the GNU extensions to

Dec 30, 2022
Style definitions for nice terminal layouts 👄
Style definitions for nice terminal layouts 👄

Lip Gloss Style definitions for nice terminal layouts. Built with TUIs in mind. Lip Gloss takes an expressive, declarative approach to terminal render

Dec 28, 2022
Pack a Go workflow/function as a Unix-style pipeline command
Pack a Go workflow/function as a Unix-style pipeline command

tpack Pack a Go workflow/function as a Unix-style pipeline command. Wiki In Unix-like computer operating systems, a pipeline is a mechanism for inter-

Nov 9, 2022
being a gh extension that runs animated terminal "screensavers"

gh-screensaver being a gh extension that runs animated terminal "screensavers" usage gh screensaver run a random screensaver gh screensaver -s pipes r

Nov 29, 2022
gh extension for bumping version of a repository
gh extension for bumping version of a repository

gh bump a gh extension for bumping version of a repository. Usage gh bump with another repository. gh bump -R <repository> Installation gh extension

Dec 14, 2022
Lightweight CLI tool to programmatically rescale your Hetzner virtual server daily to optimize your budget spending

Lightweight CLI tool to programmatically rescale your Hetzner virtual server daily to optimize your budget spending

Nov 28, 2022
A CLI to replace your git commit command, so your git message can partially follow the Conventional Changelog ecosystem
A CLI to replace your git commit command, so your git message can partially follow the Conventional Changelog ecosystem

COMMIT CLI A CLI to replace your git commit command, so your git message can partially follow the Conventional Changelog ecosystem. And yes, it is bui

Feb 9, 2022
Make Link with Markdown Format
Make Link with Markdown Format

ml -- Make Link with Markdown Format This package is required Go 1.16 or later. Build and Install $ go install github.com/spiegel-im-spiegel/gpgpdump@

Mar 20, 2022