Baiyun Consulting Group Blog

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

<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 |

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

Markdown Cheat Sheet

• HTML Version

• PDF version

Chrome Web Store Location

• Project Name: MarkView

• Report: Any Suggestions

References

• For MarkView Advanced Features, click here
• About Markdown, see project site
  
• Github Flavored Markdown