Because GitHub's README styling is actually really nice

Markdown - How To Add Screenshot To READMEs In Github ..
Markdown Readme Github Download
Titles

Convert markdown to html with inlined styles using github-markdown-css. I'm struggling to add empty spaces before the string starts to make my GitHub README.md looks something like this: Right now it looks like this: I tried adding tag to fix the new string start, now it works, but I don't understand how to add spaces before the string starts without changing everything to . GitHub displays Markdown files so nicely, it’s a shame there is no print view where all the toolbars etc. G., with project readme files.

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 ofREADME.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:

Convert the Markdown to HTML using showdown, the most popular JS markdown parser. This could be replaced by the official GitHub markdown to HTML API
Inject the GitHub-like CSS code at the bottom of the page

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.

Check out the original markdown file of this README
Check out the raw generated HTML code generated based on this markdown file on
Check out the GitHub rendered README
Check out the README rendered by this project

Usage

Markdown - How To Add Screenshot To READMEs In Github ..

This will read the README.md from your current working directory and output the resulting HTML as README.html to 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

Bullet list item 1
Bullet list item 2
- Bullet list item 2.1
- Bullet list item 2.2

Numbered list item 1
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 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

🔰 Raw HTML code for custom style 🔰

Latest version

Released:

Autogenerated Table of Contents for Github Markdown or Bear Notes

Project description

Generated by the script ;)

Table of Contents

Installation
Usage

Overview

I love using Bear Notes for note taking of all sorts. Recently, Bear released a feature that allowed headers to be linked with x-callback-urls. And thus, I created a script to autogenerate a Table of Contents for your notes based on the headers.

Installation

NOTE: This program is only compatible with Python 3.x

PyPi (Preferred)

Manually

Usage

Flags

-h or --header-priority is the Limiting Header Priority/Strength (whether you limit your Table of Contents to h3s or h4s)
-t or --type is the type of anchor you want to use (Github or Bear x-callback-url)
--no-write is a flag on whether you want to disable the feature that automatically injects the ToC into your Markdown file or Bear Note
-toc or --table-of-contents-style is the Markdown style for your Table of Contents header

With Bear

Add a Table of Contents to a Bear Note with the title 'Bear Note Title'

‎

Add a Table of Contents to a Bear Note with the UUID 20703126-FA33-400A-B98E-F55F57E3EF48-47683-000143B2335758CA

‎

Add a Table of Contents to two Bear Notes with titles 'Bear Note Title 1' and 'Bear Note Title 2'

‎

Add a Table of Contents to all Bear Notes that contain the tag #bear OR tag #beet

‎

This allows you to take input a list of Bear Note titles, tags, or UUIDs and will inject the ToC into your note whether or not you submit the --no-write flag.
If you have #tags at the top of your note (cause I use them to categorize my notes), it will inject the ToC right after any tags.

Original Note	Note with ToC

With Markdown Files

Add of a Table of Contents to README.md (Using Github Anchors)

‎

Add of a Table of Contents to README.md and Folder/README2.md (Using Github Anchors)

Release historyRelease notifications | RSS feed

1.2.6

1.2.4

1.2.3

1.2.2

1.2.1

1.2.0

1.1.3

1.1.2

1.1.1

1.1

1.0.1

1.0

Markdown Readme Github