View Markdown File with MarkView

February 9, 2014 . blog . Comments
Tags: markdown jekyll

MarkView

MarkView is a Chrome extension for reading markdown file with an outline view, support multiple table format styles, code block syntax highlight and Github Flavored Markdown.

Same Video on YouKu

Features

  1. Viewing markdown file in web page style.
  2. Auto reload local file when file is changed (Post-installation: select "Allow access to file URLs" option in chrome://extensions/)
  3. Show outline beside the content in scrollable way
  4. Have buttons for GoTop, ViewSource and GoBottom
  5. Support multiple table format styles, code syntax highlight and GFM.
  6. Highlight the code area for programming languages(eg. ```ruby)
  7. Support web pages printing with decent outlook(Chrome->File->Print...)
  8. Responsive: when the window size small than 940px, outline section will automatically hidden; resize bigger than 940px, outline section will display.
  9. MarkView will view all markdown files except those under raw.github.com because that subdomain only displays the source.

Sample

Basic Sample Online

Multiple Table Format Styles

Head1Head2
Foo1Foo2
Foo3Foo4
<table>
  <tr>
     <th>Head1</th><th>Head2</th>
  </tr>
  <tr>
     <td>Foo1</td><td>Foo2</td>
  </tr>
  <tr>
     <td>Foo3</td><td>Foo4</td>
  </tr>
</table>
Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1
| Tables | Are | Cool |
| ------------- |:-------------:| -----:|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |

Ruby Code

  def test
    puts "Hello World!"
  end

Code: JavaScript

    function myFunction()
    {
      var obj=document.getElementById("h01");
      obj.innerHTML="Hello jQuery";
    }
    onload=myFunction;

Code: CSS

  #markdown-container {
    display: inline;
    float: left;
    width: 70%;
    padding: 10px 40px 10px 60px;
    line-height: 1.4em;
    font: 13.34px helvetica,arial,freesans,clean,sans-serif;
    color: black;
  }

Code: Go

    package main
    import "fmt"

    func main() {
      fmt.Println("Hello, world!")
    }

Screenshot Sample

MarkView

Markdown Cheat Sheet

Chrome Web Store Location

References