krausefx / markdown-to-html-github-style Goto Github PK

View Code? Open in Web Editor NEW

218.0 218.0 130.0 1.03 MB

Generate a simple HTML page based on a markdown file, that looks like GitHub's stylesheet

Home Page: https://krausefx.github.io/markdown-to-html-github-style/

License: MIT License

JavaScript 17.73% CSS 21.17% HTML 61.10%

markdown-to-html-github-style's People

Contributors

Stargazers

Watchers

Forkers

farazpatankar huri000 wazum joelz stefma midyan owencook woytek-polnik titan2351 justlester bhaal22 cincong samraj1980 adwolfart davporte cjdoris robertomalatesta ptsang1 jeepeo lbrochini m-saravanan royblueky olaho maryam1710 hero-007 sn8keyes311 pex-1 shettigarsanthosh re-savior drewharshaw haodaz sahilbajaj-roposo sajijola1 franxifra patrick-gourdet redhab priya1114 avimuk coddit xpanella ppambler vanphong helderm01 jeffreyho101 suvink irinagain rahul-mishra-coder demonslayer10 micpob diyaannathoma2 fernandobdansi chen-keinan atefdodo bahareharandizade catekat16 williamjqk mjk134 bhagydeep24 volkantagal hsgaurav hmrg-grmh sasha-uk lucasalesterio jrnewton prones94 sam-1210 haalibrahim melvynph bharath2408 nasrij e-oliveira jayeshmax erickkf600 loressl yakubouski qnreck akankshvee tnkompanska19 simon-xu-lan erickonieczko-toast jeeshan12 feldrise billwang115 changsen-dev monsieurduke ujwalamusku eoinbrennan2000 wdoconnell prantaneel alu0101320779 pellerano salunkhebhushan drobert31 jm-lemmi fcoyevenes yash-me hatimmansor fyevenes90 arbakker alforov-eugene

markdown-to-html-github-style's Issues

(feature request) footnotes support

One of my favorite features of GH markdown is footnotes. Here's an example article of mine that makes extensive use of them. Would it be possible to add support for these to this project?

Add option to make use of GitHub's official markdown parsing

To make sure it's fully compatible, we could make simple web requests to the GitHub markdown API

This will generate just the HTML code, not the CSS necessary

Make this project usable by providing a CLI

Right now it's mostly a proof of concept, because I needed it for myself for WalkWithFriends.net, this CLI should provide options for an input and output path, and be distributed via a dependency manager to actually include this in a project.

Since most of this project is just the style.css file, we could easily add multiple implementations, like Ruby, to make it easy to integrate it into all kinds of projects.

Table is rendering as markdown

Add mobile support

How to automatically use your style.css

Dear Felix,

Thank you for providing this repository!

For our bioinformatics work at the DRESDEN-concept Genome Center, we started to write Markdown files to provide READMEs to our collaborators. We are currently using Gitlab for that, and wrote our first CI/CD script to automatically generate HTML and PDF files when a Markdown file has been changed.

The basic pandoc-generated files look pretty ugly, so I started to play around to make them prettier. I followed your recipe today, and ran into a question.

First, I tried pandoc --standalone --css="style.css" (and various versions of it), but it would not incorporate the CSS file properly.

Then, I pretty literally followed your advise and automatically "injected" the content of your style.css file to the end of the basic pandoc-generated HTML file. That worked!

# Convert Markdown to HTML 
pandoc --standalone --from=markdown --to=html $file -o "doc/${id}.html"

# Add CSS at the bottom of the HTML
# Remove last two lines
mv doc/${id}.html doc/${id}_orig.html
head -n -2 doc/${id}_orig.html > doc/${id}.html

# Inject CSS file
echo "<style type='text/css'>" >> doc/${id}.html
cat style.css >> doc/${id}.html

# Close blocks again
echo "</style>" >> doc/${id}.html
echo "</body>" >> doc/${id}.html
echo "</html>" >> doc/${id}.html

It looks so much better than before, but I still wouldn't get the same text width (it looks quite narrow) and am missing the outer border. Would you have any idea?

Thanks a lot in advance!
Best wishes from Dresden :)
Katrin

Improve support for images

I haven't had the time to test this yet, but images on GitHub behave quite nicely. It might be that this project doesn't properly render images yet

Add a way to stop processing markdown once the Development section is hit

This way it allows you to keep the project README focused on both the product landing page, as well as development specific instructions. This could be as simple as looking for the

## Development

section, allowing the user to specify what header to look for what

"hljs" artefact in code environment?

Hi,

when I generate HTML from the following page:

```
Type :   Extensible
Order:   Significant
Root :   Yes
```

I get:

Where does the hljs come from? I have recent versions of markdown-to-html-github-style and showdown installed.

Thanks!
Michael

Open links to external hosts in new tab

Use target=_blank for all links that link to another domain. This will require knowledge of its own domain, for absolute URLs going to its own domain. Might be good enough without specifying its own host, and assume relative URLs

Using __dirname for export filename makes no sense

The script should use process.cwd() (the current directory) instead for finding the README and writing the index.html
(or ask for it)

<meta charset="UTF-8"> by default?

It seems to be a de facto practice on modern web sites to use UTF-8, i.e.

<head>
  <meta charset="UTF-8">
</head>

This way one does not need to write the awkward ä etc. codes to represent letter ä for example. Maybe it would make sense to have that meta tag be generated in all output by default?

Add nice style for hr nodes

---

looks pretty bad right now, take the design from krausefx.com or github.com

Add support for syntax highlighting

Code blocks currently don't support syntax highlighting, however that's something that's rather easy to add. For a minimalistic stylesheet we could take the styles from krausefx.com/css.

There are many libraries that support syntax highlighting to HTML, some even come with nice stylesheets. We gotta find one that's similar to GitHub