Google analytics script

Latest jQuery CDN with code tiggling.

Tuesday, 7 January 2014

Web Essentials markdown preview default style for Visual Studio

The other day I wanted to write a markdown file that's part of my Visual Studio 2013 project. As majority of you have done I've also installed Web Essentials addon for Visual Studio 2013. Beside the several syntaxes it supports one of them is also markdown. The problem I was facing was that its preview window had a really basic browser style. I wanted to change that.

Web Essentials and markdown

As I read on Web Essentials markdown feature page it should support styling of markdown preview window. It says: You can add a solution specific Stylesheet to control the styles of the preview window. But how?

There is no particular documentation about it so instead of exploring it all myself I turned to Stackoverflow for help. User Matthew Lothian dig up info somewhere how CSS file should be named and where to put it.

The good (or bad) news

Markdown styles are per solution. They aren't default so in the form of set and forget. You'll have to always include this file with every Visual Studio solution where you'd like to edit markdown files. The good news is that this gives us enough flexibility. But this may also be bad because we have to repeat these steps with each solution even though we'd likely just copy an existing stylesheet and reuse it. It's not deployed in any way shape or form with your application. This is just our own markdown preview within Visual Studio. That's why this gives a bit too much flexibility as we likely don't require different look for each solution. But anyway you look at it, the possibility is there to use. So it's good that it's flexible but bad that it's flexible per solution only.

Steps to set markdown styles

These are the steps to set styles for Web Essentials markdown preview window in Visual Studio:

  1. Right-click on your solution in Solution Explorer and add a new solution folder with name Solution Items
  2. Right-click the newly created folder and add a CSS file (or LESS that Web Essentials will also auto compile on save) named WE-Markdown.css
  3. Edit styles to your preference

Stylesheet example (LESS syntax)

This is an example stylesheet that I'm currently using. If time permits I'll create a NuGet package so it'll be much easier for us to add it to every solution where required. This example is LESS syntax but it can easily be converted to CSS as I've only nested one style in it:

   1:  body
   2:  {
   3:      font-family: "Segoe UI", sans-serif;
   4:      font-size: 11pt;
   5:      line-height: 1.6em;
   6:      color: #333;
   7:  }
   8:   
   9:  p {
  10:      margin: 0;
  11:      padding: 0;
  12:  }
  13:   
  14:  h1, h2, h3, h4, h5, h6 {
  15:      line-height: normal;
  16:  }
  17:   
  18:  h1 { font-size: 20pt; letter-spacing: -1px; }
  19:  h2 { font-size: 18pt; letter-spacing: -1px; }
  20:  h3 { font-size: 16pt; }
  21:  h4 { font-size: 14pt; }
  22:   
  23:  code, pre, kbd {
  24:      font-family: Consolas, monospace;
  25:      background-color: #eee;
  26:      line-height: 1.2em;
  27:  }
  28:   
  29:  code, kbd {
  30:      padding: 0 .25em;
  31:  }
  32:   
  33:  kbd {
  34:      display: inline-block;
  35:      margin: -2px 0;
  36:      border-width: 1px;
  37:      border-color: #ddd #bbb #999 #ddd;
  38:      border-style: solid;
  39:  }
  40:   
  41:  pre {
  42:      padding: .25em .5em;
  43:   
  44:      code {
  45:          padding: 0;
  46:      }
  47:  }
  48:   
  49:  blockquote {
  50:      margin: 0 0 .5em;
  51:      border: 1px solid #ddd;
  52:      padding: .75em 1.5em;
  53:      position: relative;
  54:      font-style: italic;
  55:      color: #666;
  56:  }

2 comments:

  1. Great... but how the f#@k do you create a new md file??

    ReplyDelete
    Replies
    1. All from VS IDE: add a text file and change its extension from TXT to MD.
      Combined: add a MD file directly in the file system and use "Add existing item" in VS.

      Delete