Package Exports

markdown-styles

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (markdown-styles) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

markdown-styles

CSS stylesheets / themes for Markdown.

Using

Copy the assets folder from the layout you want to use.

To preview the styles in the browser, clone this repo locally and then open ./output/index.html.

Or run:

make preview

which just uses open (on OSX) or xdg-open (on Linux) to open ./output/index.html.

Using via npm

This repo also includes a small tool for generating HTML files from Markdown files.

The console tool is generate-md, e.g.

generate-md --layout jasonm23-foghorn --output ./test/

Here is an example of how I generated the project docs for Radar.

Note how you can override / customize the theme easily since it's just a simple convention of what goes where.

Options:

--layout specifies the layout to use.

Note: the layout can also be a specific file. In this case, that file is used as the template, and if a ./assets/ directory exists in the same location as the layout, it is copied to the output directory. For example:

  generate-md --layout ./layout/page.html --output ./test/

--input specifies the input directory (default: ./input/).

--output specifies the output directory (default: ./output/).

Screenshots

Note: there may be minor differences in the rendering since these screenshots are generated via cutycapt rather than a browser.

jasonm23-dark

jasonm23-foghorn

jasonm23-markdown

jasonm23-swiss

markedapp-byword

mixu-book

mixu-page

mixu-radar

mixu-bootstrap (new!)

mixu-bootstrap

mixu-bootstrap-2col (new!)

mixu-bootstrap-2col

mixu-gray (new!)

mixu-gray

thomasf-solarizedcssdark

thomasf-solarizedcsslight

Adding new styles

Create a new directory under ./output/themename.

If a file called ./layouts/themename/page.html exists, it is used, otherwise the default footer and header in ./layouts/plain/ are used.

The switcher is an old school frameset, you need to add a link in ./output/menu.html.

To regenerate the pages, you need node:

git clone git://github.com/mixu/markdown-styles.git
npm install
make build

To regenerate the screenshots, you need cutycapt (or some other Webkit to image tool) and imagemagic. On Ubuntu / Debian, that's:

sudo aptitude install cutycapt imagemagick

You also need to install the web fonts locally so that cutycapt will find them, run node font-download.js to get the commands you need to run (basically a series of wget and fc-cache -fv commands).

Finally, run:

make screenshots