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
🧠 Custom Meta Tags
🇳🇱 CodeSandbox and iframe Support

yarn add fiddly --dev

npm install fiddly --save-dev

Usage

{
  ...
  "scripts": {
    "build:demo": "fiddly",
    ....
  }

Deploy automatically to netlify 🎉

This Readme on Netlify

This Readme with white theme

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:

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
shareCard	''	URL to social media preview image for meta tags (recommended size: 1200x628, URL cannot be relative)
description	description in package.json	The project description for meta tags
homepage	null	The project homepage for meta tags
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
repo	null	Link to point the github corner
pathPrefix	Environment var PATH_PREFIX or '/'	Host your fiddly files at e.g. /my-fiddly-project
meta	[]	Any extra meta tags you would like
remoteStyles	[]	Array of any remote styles you want to include (eg: Google Fonts)
remoteScripts	[]	Array of any remote scripts you want to include (eg: Google Analytics)
deployment	{}	Deployment options for github pages. Accepts all options here

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;
  }
}

Meta Tags

To create any meta tags it uses an array system like so:

  "meta": [
    { "name": "description", "content": "A cool page" },
    { "property": "robots", "content": "robots.txt" }
  ]

This will create the following HTML:

<meta name="description" content="A cool page" />
<meta property="robots" content="robots.txt" />

The first key on the object can have any name and will be applied as presented, the second one must have the name of content and will work as presented above.

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.