fiddly

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
  • 🇳🇱 CodeSandbox and ifame Support
yarn add fiddly --dev
npm install fiddly --save-dev

Usage

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

Deploy automatically to netlify 🎉

This Readme on 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 and it contains the following options:

Option Default Description
file Readme 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. This will override everything else. Use any css selector

Example of styles

{
  "styles": {
    "h1": {
      "color": "blue",
      "backgroundColor": "red"
    }
  }
}

This will override all the H1 styles since what I do is use all of this with an id before hand so that it overrides everything.

HTML in Markdown

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 surroun ding 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

Images

Any images linked in your markdown that are local will be copied to your public folder. If some image is not found it will be ignored.

Github Corner

The Github corner comes from the repository url in your package.json. If none is present it will not be shown.

Acknowledgements

License

MIT - see LICENSE