… is a lightweight CSS (& JS) library to make simple, attractive, and easy-to-read documentation. The project’s inspiration stems from your terminal’s man
pages, and focus is placed on simplicity & clarity with a nod to the monospace
world.
man
is perfectly suited to styling Markdown-generated documents, although manually-authored HTML will provide some features & capabilities that are not supported in Markdown’s simplified syntax/structure.
Simply include the stylesheet in your page…
… and, optionally, the following JavaScript:
<script src="http://davidfmiller.github.io/man/man.js"></script> <script> window.Man({ pre: true, footnotes: true }); </script>
… or save the files locally within your project’s repository and include them from there.
This page is built using man
; save and copy the source to use as a template for your project’s documentation.
man
now supports footnotes1.
… should be placed within the standard <pre></pre>
(for block formatting) or <code></code>
(for inline presentation) tags. Output from pygments
’ HTMLFormatter
will receive syntax highlighting, ex:
<!DOCTYPE html> <html lang="en"> <head> <title>man</title> <meta charset="utf-8"> <meta name="viewport" value="width=960"> <link rel="stylesheet" type="text/css" href="man.css"> </head> <body> <-- markup --> </body> </html>
Create annotated markup from a source file like so:
⚡ pygmentize -f html -l python -o output.html input.py
Code blocks may be linked to directly, for example:
<pre id="hash-id"> <-- source goes here --> <a href="#hash-id" class="hash" aria-hidden="true">#</a> </pre>
If the pre
flag is passed to the JavaScript initializer, all multiline <pre>
blocks will receive line numbers. It is recommended that unique id
attributes be added to the blocks so that line number anchors remain consistent as the page evolves/changes. Blocks that have a data-no-lines
attribute applied will not have line numbers applied.
Use an <i>
tag within a <pre>
block to prevent text-selection on elements (ex: command prompts, comments, etc).
You can create a simple, unordered list like so:
line-height
within header elements and ensure they match the rest of the document.Strong, em, code
A0 | B0 | C0 |
---|---|---|
A1 | B1 | C1 |
A2 | B2 | C2 |
The following pieces are either actively in development or on the roadmap:
::-ms
<input required>
If there is something you would like to see included please file an issue.
@charset "UTF-8"; html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none} html { background: #fff; } body { background: #fff; color: #000; font: 12px menlo, consolas, monaco, monospace; max-width: 800px; margin: 0 50px; padding: 20px 0; } h1 { font-size: 20px; position: relative; font-weight: bold; } h2 { margin: 20px 0 20px 0; position: relative; font-weight: bold; font-size:15px; } h3 { font-weight: bold; position: relative; margin: 20px 0 20px 0; } h1, h2, h3 { color: #444; } a { color: blue; text-decoration: none; border-bottom-width: 1px; border-bottom-style: solid; } a:visited { color: purple; } a:hover { color: red; } h1 a, h1 a:visited { color: #000; border-bottom-width: 0; } h1 a:hover { border-bottom-width: 1px; } dt a, dt a:visited, h3 a, h3 a:visited, h2 a, h2 a:visited { position: absolute; text-decoration: none; border: none; color: #eee; left: -15px; transition: color 0.2s linear; } dt:hover a, h3:hover a, h2:hover a { color: #888; } dt:target a, h2:target a, h3:target a, dt:target a:hover, h2:target a:hover, h3:target a:hover { color: red; } h3 a:hover, dt a:hover, h2 a:hover { text-decoration: underline; color: blue; } p { margin: 20px 0; line-height: 2em; } p + p { margin-top: -10px; } dt { position: relative; } dl { margin: 20px 0; } dd { padding-left: 10px; margin: 10px 0; } dd ul, dd ol { margin-top: 10px; } dd:before { content: "-"; padding-right:10px; } dt + dd > pre { margin: 0; } dd + dd > pre { margin: -10px 0 10px 0; } li { padding-left: 10px; margin-bottom: 10px; } li:last-child { margin-bottom: 0; } ol li { list-style-position: inside; list-style-type: decimal; } ul li:after { content: ","; color: #666; } li:last-child { } ul li:last-child:after { content: "." } ul li:before { content: "×"; color: #666; padding-right: 10px; } em { font-style: italic; } code, pre { font-family: consolas, menlo, monaco, monospace-serif; background: rgba(0,0,0,0.03); } pre code { line-height: 20px; } code a, code { color: #666; } code:hover { background: #f0f0f0; } pre { background: rgba(0,0,0,0.02); padding: 10px; border-radius: 3px; margin: 20px 0; border: 1px solid rgba(0,0,0,0.1); transition: background-color 0.2s, border-color 0.2s; cursor: text; position: relative; overflow: scroll; } pre.lines { padding: 10px 0; } pre code { background: transparent; } pre:hover { background:rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.3); } pre a { color: blue; border-bottom-width: 0; } pre a:hover { border-bottom-width: 1px; } i { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } dl { margin: 10px 0; } hr { height: 1px; border: none; line-height: 0; padding: 0; /* background: rgba(0,0,0,0.1);*/ background: rgba(127,127,127,0.1); margin: 20px 0; } pre table { width: 100%; } pre tr td { transition: background-color 0.1s; padding: 0.1em 0; } @media screen and (max-device-width: 480px) { /* smartphone */ body { width: 90%; margin: 0 auto; padding: 10px 0; } } @media only screen and (device-width: 768px) { /* tablet */ body { width: 90%; margin: 0 auto; padding: 10px 0; } }
A footnote just for the sake of it. ↩