GitHub README creator (Markdown Previewer)

Here’s a project I made for the front-end libraries certification. I tried to create something that was actually useful, so this helps people create readme files and learn the syntax of markdown. Here’s some of the things I’m looking for:

  • Bugs / visual discrepancies on different browser / OS setups
  • CSS differences with GitHub’s actual README’s (even if you notice something minor)
  • Any other feedback that comes to mind

Link to project

1 Like

Nice idea. Maybe you should add a table example.

Hi @Ne0nWinds, looks good. I have a few repo’s on GitHub and each one has a README.md so what I did was just cut & paste and then do a compare. Some things I noticed;

  • For the headers, there’s a green bar on the left for the <h3> through <h6> Markdown equivalents (### through ######). I don’t see this on GitHub and I don’t see it for the first two (# and ##) equivalents on your project. (I think this should be corrected)
  • This is probably a nit. (Don’t think it needs to be corrected) If I remember correctly when I wrote the following piece of Markdown I’m pretty sure I intended it to be a numbered list. However, GitHub shows it as alphabetical, as does the plug-in I use in Brackets. Your previewer shows it as numbered. Here’s a piece of the code I’m talking about. I shortened it using elipisis but you can get the gist.
  - * **Applied Accessibility**    
    * "Accessibility" generally means ... challenges:  
      1. have well-organized code that uses appropriate markup  
      1. ensure text alternatives exist for non-text and visual content  
      1. create an easily-navigated page that's keyboard-friendly
  • This one should be corrected. If I have a sentence that has one word that is surrounded by backticks because it is code, your previewer puts that one word on a line by itself. GitHub doesn’t do that nor does the plug-in I use for Brackets (nor does this Markdown). A sample follows;
### To-do
- [x] Add code snippets to the pages so I don't have to continuously view the page source to see what I did to create the particular Bootstrap sample being displayed.
- [x] Decide which .container class to use:
  - [ ] `.container` provides a responsive fixed width container
  - [x] `.container-fluid` provides a full width container which spans the entire width of the viewport
- [ ] There's an accordian page in root that uses HTML and JavaScript.  Recreate with Bootstrap.  (Google is my friend.)
- [x] Update beta example pages with the latest stable v4 release

It looks good. If you want to see my repo’s on GitHub to use some of my README.md files my id there is sjroma

1 Like

Looks awsome, bookmarked and i will use this!
just wondering if you are interested in adding badges?
i did a quickie badge thing you might like,…

1 Like