Google Chrome Extension to preview markdown files on GitHub, either static or live as you type. It can have markdown rendered standalone, or using Helix.
- Download and extract the latest release, or clone this repository to your local disk:
git clone https://github.com/rofe/helix-markdown-preview.git
- Open Chrome and navigate to
chrome://extensions
- Turn on Developer mode at the top right of the header bar
- Click the Load unpacked button in the action bar
- Navigate to the
src
directory of your local copy and click Select to install and activate the extension - Verify if your Extensions page displays a box like this:
and the tool bar shows a grayed out Helix icon:
Stay tuned...
- Navigate to any markdown (*.md) file on GitHub, like this one for example.
- Click the Raw button. Notice how the Helix icon in the toolbar is colored now:
- Click it.
- A popup opens, showing the rendered output.
- Navigate to any markdown (*.md) file on GitHub.
- Click the pencil icon to switch to editing mode (only available if you have write access). Notice how the Helix icon in the toolbar is colored now:
- Click it.
- A popup opens, showing the rendered output.
- Edit the markdown and observe the changes in the popup.
The zoom factor in the preview window is adjusted automatically to the window size. You can also set it manually using the dropdown at the top right.
By default, markdown will be rendered in standalone mode in your browser. In order to let a Helix server render the markdown, follow these steps:
- Start a local Helix server. See www.project-helix.io how to set it up.
- Open a new browser window, click the grayed out Helix icon in the toolbar and select Options:
- Click the checkbox to enable Helix rendering.
- Provide the base URL of your Helix server, e.g.
http://localhost:3000
. - Navigate to a markdown (*.md) file, e.g.
index.md
, in your project's repository on GitHub. In theory, you can use any markdown file from any repository, as long as the file path can be matched on your Helix server. - Click either the Raw button (for static preview) or pencil icon (for live preview), then Helix icon in the tool bar.
- A popup opens, showing the rendered output from Helix.
Non-local Helix servers are currently not supported.
Helix Markdown Preview uses the following libraries:
- Marked JS library to render markdown in the preview (MIT License)
- diffDOM JS library to diff DOM elements (LGPL v3)
- Primer CSS for GitHub-style output (MIT License)