Cheat Sheet generation made easy
npm install @cheaty-sheet/cheatynpm i @cheaty-sheet/cheaty or npm i -g @cheaty-sheet/cheaty to use the cli in your whole system.Rendered cheat sheet are print ready, A4 formatted, interactive html files.
Every block on the html cheat sheet is moveable by drag and drop !
javascript
const cheaty = require("@cheaty-sheet/cheaty");
const YMLParser = cheaty.parsers.YMLParser;
const HTMLRenderer = cheaty.renderers.HTMLRenderer;new YMLParser().parseFromDisk("./cheatsheet.yml").then(sheet => {
new HTMLRenderer().render(sheet).then(render => {
render.saveToDisk("./cheatsheet.html");
});
});
`YMLParser instance have a parseFromDisk('PATH') method which will parse your sheet cheat. For now, we only provide
a YML parser. But you can expect more to come in the future !
Then as for parser, we can instantiate a HTMLRenderer which have a render(sheet) method to render your sheet cheat.
And for now, we only support HTML rendering. The returned render object have 2 method : .toString() to get the cheatsheet as (html) string, and
.savetoDisk(OUTPUT_PATH) to directly save your generated sheet cheat on disk.> Parser also have a
.parseFromString(STRING) to directly parse content. Here you would pass a YML string.$3
One simpler option is to directly use the cheaty command.
`text
cheaty render render the given input
Positionals:
inputs input(s) yaml file [string]
Options:
--version Show version number [boolean]
-h, --help Show help [boolean]
-o, --output output folder [string] [default: "./"]
`
So you could use cheaty cheatsheet.yml and then open the newly created cheatsheet.html file.$3
Using nodemon you can restart the cli on each modification of your sheet.
Here is an example using the cheaty cli
`bash
nodemon -e yml --exec "cheaty render" cheatsheet.yml
`
You can also use nodemon to watch the build script from the previous part of this doc
`bash
nodemon -e yml script.js
`
> We provide a VScode live preview extension for cheaty !
YML syntax
Cheat sheet are divided into the following structure : block > section.
The most basic cheat sheet would be
`text
title: My Cheatsheet
description: custom description
blocks:
- title: My first block
sections:
- type: text
content: My first content
`A sheet could contain as many blocks as needed, depending on the block size (it have to fit on an A4 paper).
Minimal required properties are :
* A title
* A description, which can be empty
* An array of blocks, which must contain at least one block, with at least one section in it.
> Title and description can be markdown
Global options
It is possible to override some parameters in cheaty by using the options block.`text
title: My Cheatsheet
description: custom description
options:
key: value
blocks:
- title: My first block
sections:
- type: text
content: My first content
`
$3
You can customize the sheet paper size using the size options.
It accept the following value :
* A3
* A4
* A5
* legal
* letterAll format have landscape possibilities like
A4 landscapedefault:
A4`yaml
title: My Cheatsheet
description: custom description
options:
size: A5 landscape
`$3
You can add a author mention using the author options. This option fully support markdown.`yaml
title: My Cheatsheet
description: custom description
options:
author: Hello cheaty sheet
`Note that due to YML limitation, a single markdown link is not a valid string.
You'll have to write it like
author: "cheaty sheet"
$3
You can add a logo on document using the logo options.`yaml
title: My Cheatsheet
description: custom description
options:
logo: http://your-site.com/logo.png
`$3
You can add a watermark on document using the watermark options.`yaml
title: My Cheatsheet
description: custom description
options:
watermark: Confidential
`$3
You can change the default font size of blocks using the font_size options. Font size are in pt. Default to 6pt.> font_size use css style. It will be overwritten by the use of
replace_style and replace_style_url`yaml
title: My Cheatsheet
description: custom description
options:
font_size: 11
`$3
Code highlight is done via highlight.js.
You can choose a theme on the demo page.default:
github`yaml
title: My Cheatsheet
description: custom description
options:
highlight_theme: darkula
`$3
You can inject or replace your own css.To add css :
`yaml
title: My Cheatsheet
description: custom description
options:
additional_style: '.foo {color:black;}'
`To overwrite cheaty css:
`yaml
title: My Cheatsheet
description: custom description
options:
replace_style: '.foo {color:black;}'
`> replace_style has priority over additional_style, thus having replace_style in options will deactivate any other
style relative option.
You can also link to an external style sheet by using
additional_style_url or replace_style_url.You can also inject style in blocks. You might prefer this for block specific settings, like font-size.
Blocks and Sections
A block represent a reserved space on the sheet paper. It must have a title and at least one section.
A block can contain as many sections are needed.Section are the real content of you sheet. At least, each section will have a type and content property.
As you might have now guessed, they are multiple block type.
$3
Used to represent a text paragraph. It can be used for description of anything you want
`yaml
type: text
content: My first content
`$3
Used to represent a text paragraph. It can be used for description of anything you want.
`yaml
type: markdown
content: My first link to google
`> We support github flavored markdown. Check the documentation for all features.
$3
Code section are highlighted portion of code. We're using highlight.js library for that part.
`yaml
type: code
language: javascript
content: |-
cheaty.parseFromDisk('./cheatsheet.yml', 'YML')
.then(sheet => {
sheet.render('HTML').then(htmlRender => {
htmlRender.saveToDisk('./cheatsheet.html')
})
});
`language will be inserted in the html to force highlight.js to detect this syntax. So we are not relying on syntax
auto detection here.> We are using multiline yaml string to insert code in the yaml file.
Please refer to the Options section of this documentation for theme customization.
Blocks options
$3
You can override a block theme using this object. It will be serialized and injected in the
style property.`yaml
blocks:
- title: My first block
style:
font-size: 12pt
sections:
- type: text
content: This will have a font-size of 12pt
``