GitHub - SaraVieira/fiddly: Create beautiful and simple HTML pages from your Rea...
source link: https://github.com/SaraVieira/fiddly
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Readme.md
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 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
and it contains the following options:
Example of styles
{ "styles": { "h1": { "color": "blue", "backgroundColor": "red" } } }
Or in package.json
:
{ "name": "my-package", // ... "fiddly": { "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 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
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.
TODO
- Deploy using magic to GH Pages too
- Support Multiple pages (if this exists in the config create several HTML files with a header and links to each page)
- Allow users to input a css file to override the styles instead of all the styles in a json
- Use sass so that the user can use sass too
- Make All Contributors look nice
- Allow option to change prism theme
- Optimize images on copy
- Have tests with cypress to make sure page looks okay
- Have more tests and find way to mock the input file in it
Acknowledgements
- Base styles from medium.css
- Logo from OpenMoji
Contributors
Sara Vieira
? ? ?
Bruno Scheufler
?
Siddharth Kshetrapal
?
Jamon Holmgren
?
Timothy
?
License
MIT - see LICENSE
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK