• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

KrauseFx/markdown-to-html-github-style: Generate a simple HTML page based on a m ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

KrauseFx/markdown-to-html-github-style

开源软件地址(OpenSource Url):

https://github.com/KrauseFx/markdown-to-html-github-style

开源编程语言(OpenSource Language):

HTML 70.5%

开源软件介绍(OpenSource Introduction):

Markdown to GitHub style web

Because GitHub's README styling is actually really nice

Background

If you have a little side project, often you might want a simple landing page. The GitHub README rendering is really beautifully done: clean, simple and modern. The official GitHub markdown to HTML API generates the HTML code, but not the stylesheets necessary to make it look nice.

Using your GitHub README as the main landing point works great for open source projects, where your visitors are developers and are familiar with GitHub, as well as you have all the text right where the code, the Issues and PRs are. But for some projects this isn't ideal. I built this project within a few hours for myself to get WalkWithFriends off the ground fast, without investing in building an actual website, or using a bloated website builder.

Some issues you run into when using GitHub as your main landing page

  • Maybe your project isn't actually an open source project, so you can't just host a README on GitHub
  • If you want to link to just the README, you could append #readme to your browser URL (making the URL less pretty), or the visitor has to know they have to scroll down
  • The mobile page of GitHub is still pretty bad, and it only renders the first few lines, as soon as you have a logo and badges on your page, it doesn't render at all, unless the visitor hits View all of README.md
    • Non-tech visitors don't know what's a README.md
    • The button is small, and people don't know what is
    • GitHub renders the GitHub Pulse below, something that doens't make sense for non-tech visitors
    • The URL changes from something nice like github.com/krausefx/fastlane to github.com/krausefx/fastlane/blob/master/README.md, meaning you can either link directly to this page to have a nice content, or you link to the root page and have the downside of the extra buttons
    • Nat announced, that they working on improving the mobile experience, which is great news for everybody :)
  • You can't use your own domain
  • If you use your own domain, you have to use GitHub Pages (which is excellent btw), but then you have to have HTML files ready, which is exactly what this project solves.

Solution

A simple script that converts a markdown (.md) file to a single HTML file, that includes all the HTML and CSS code inline, so you can host it anywhere.

There is no need to use this script if you already convert your markdown file to HTML, you can directly use the stylesheet of this repo.

How it works

This project doesn't actually use the GitHub stylesheet, it's far too complex, and has legal implications.

Instead this project does 2 things:

Resulting you get an HTML file that contains everything needed, so you can host the page on GitHub pages, AWS S3, Google Cloud Storage or anywhere else.

Dependencies

npm install

Usage

node convert.js MyPageTitle

This will read the README.md from your current working directory and output the resulting HTML as README.html in the same directory.

Open tasks

Check out the open issues, in particular 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.

Playground to test

{
  testcode: 1
}
  • Bullet list item 1
  • Bullet list item 2
    • Bullet list item 2.1
    • Bullet list item 2.2

  1. Numbered list item 1
  2. Numbered list item 2

Inline code comments are 100

Quoted texts are more gray and look differently

Bold text is bold and inline links work as well.

Header 1

Header 2

Header 3

Header 4

Header 5

Normal text content again, lorem ipsum

Text 1 Text 2 Text 3
Text 1 Text 2 Text 3
Text 1 Text 2 Text 3



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap