Fiddly
Create beautiful and simple HTML pages from your Readme.md files
- ? No config
- ?? Code Highlighting
- ?Emoji Support
- ✨Creates Static files (only JS is prism)
- ?️? Pretty Pages
- ? Customizable
- ? Image minification
- ?? CodeSandbox and iframe Support
yarn add fiddly --dev
npm install fiddly --save-dev
Usage
{
...
"scripts": {
"build:demo": "fiddly",
....
}
Deploy automatically to netlify ?
Usage with npx
If you just want a quick fancy HTML page from the Readme but don't care about running this in continuous deployment you can also use npx to run it as a one time thing.
npx fiddly
By running this in the root folder you will also get a public folder
Options
Options are placed in a .fiddly.config.json or as a fiddly key in package.json.
It can contain the following options:
Example of styles
For styles you can either use a style object like so and that will override the
default styles applied. Like so:
{
"styles": {
"h1": {
"color": "blue",
"backgroundColor": "red"
}
}
}
Another option is to give the path to a local css or scss file.
In this case you need to override any specificity issues.
You can by using the #fiddly id.
Example:
body {
background: #fff;
}
#fiddly {
h1 {
text-transform: uppercase;
}
}
Images
Any images linked in your markdown that are local will be minified and copied to your dist folder.
If some image is not found it will be ignored.
GitHub Corner
The GitHub corner comes from either the repo option in your .fiddly.config.json
or from the repository url in your package.json.
If none is present it will not be shown.
Lint
Fiddly also exports a command to let you lint all the markdown files you specified.
You can run this by using the lint command
"lint:md" : "fiddly lint"
Deploy
Fiddly also exports a command to let you deploy your new site to GitHub pages
You can run this by using the deploy command
"deploy" : "fiddly deploy"
Options for this can be passed in a deployment key in your config file.
All options can be found here: https://github.com/tschaub/gh-pages#options
Acknowledgements
- Base styles from medium.css
- Logo from OpenMoji
Contributors
License
MIT - see LICENSE