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
{
...
"scripts": {
"build:demo": "fiddly",
....
}
Deploy automatically to netlify π
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 are placed in a .fiddly.config.json
or as a fiddly
key in package.json
.
It can contains the following options:
Option | Default | Description |
---|---|---|
file | Readme.md, readme.md, or README.md | Your Readme.md name |
name | name in package.json | The project name that is in the title and the header |
logo | '' | The project logo that is in the header |
description | description in package.json | The project description for metaTags |
noHeader | false | Show no header and just the markdown content |
darkTheme | false | Dark theme ofc π |
favicon | '' | Favicon url or local path |
dist | public | To what folder to render your HTML |
styles | {} | Styles to apply to the page. Object or path to css/scss file |
additionalFiles | [] | Any other pages to create. It expects an array of paths of markdown files |
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 cab by using the #fiddly
id.
Example:
body {
background: #fff;
}
#fiddly {
h1 {
text-transform: uppercase;
}
}
If you have any HTML in your markdown that has children that are markdown. For example a div like this:
<div align="center">
[![Hello](./image)](https://link.url)
</div>
In order for fiddly to render the inner contents as markdown you will need to add
data-markdown="1"
to the surrounding element like so:
<div align="center" data-markdown="1">
[![Hello](./image)](https://link.url)
</div>
This is not needed for anything without children like images or <br>
tags.
You can see the issue regarding showdown here
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.
The Github corner comes from the repository url in your package.json
.
If none is present it will not be shown.
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 using magic to GH Pages too
- Allow option to change prism theme
- Have tests with cypress to make sure page looks okay
- Have more tests and find way to mock the input file in it
- Base styles from medium.css
- Logo from OpenMoji
Sara Vieira π» π¨ π€ |
Bruno Scheufler π» |
Siddharth Kshetrapal π» |
Jamon Holmgren π» |
Timothy π» |
Andrew Cherniavskii π» |
---|
MIT - see LICENSE