Share via

Welcome to the Dark Side , Code Snippets

  • Article

Hi,
For most of the code samples that I post on my blog , I use “Insert Code for Windows Live Writer” plugin for WLW
  to format code snippets and  absolutely love the way that the code snippet turns out on the blog. 
  I use the Dark Theme  by Orren Ellenbogen for my VS at home and at work and wanted to mirror
  the code snippets on my blog to turn up the same way .

  Step 1) Figure out what kind of styles are used by the Visual Studio theme
  Step 2) Figure out how to apply said styles to output of Insert Code for Windows Live Writer.

Step 1)
  Go to Visual Studio –> Tools –> Options –> Expand Environment –> Fonts and Colors
   There you have it ! All the styles that are used by the VS to format my code in the dark theme.

Step 2) 

  1.    Open one of my earlier posts in Windows Live Writer. 

  2.    Go to “Source” tab / menu option ( depending on your version of WLW)

  3.     Find the code snippet and examine styles around it .
    ex: For the code :
    <div id="listTemplate" class="sys-template">
      <ul>
        <li> {{ ListTitle }}
        </li>
      </ul>
    </div>

    The output is :

    <pre class="csharpcode">
              <span class="kwrd">&lt;</span><span class="html">div</span> <span class="attr">id</span><span class="kwrd">=&quot;listTemplate&quot;</span>

<!—Rest of the html removed for sanity—!>
     The primary class seems to be “csharpcode”

  4. In the source , if you choose to embed the styles , see if the styles are added .

The way the styles seem to work are :
   there is a main class  “csharpcode” , and every other class inherits from this
    keywords are decorated by the class ‘kwrd”,
    comments are “rem” and so on and so forth.

5. I fired up the calculator , switched to Hex mode and started translating some of the key colors from visual studio into their hex equivalents.
6.  And modified the files to make the new stylesheet for code snippets
      “darkcsharpcode”

Behold the results!

Normal code snippet with the Plugin  

 <div id="listTemplate" class="sys-template">
   <ul>
       <li>
            {{ ListTitle }}s 
       </li>
   </ul>
</div>

DarkCsharp

 <div id="listTemplate" class="sys-template">
   <ul>
       <li>
            {{ ListTitle }}
       </li>
   </ul>
</div>
How do I use this in my posts?
  1. Download the css file available at the top of this post.
  2. Add the contents of the file to your css files or the Styles generated by the Code Snippet pluggin
  3. And voila ! you should be done.
Which color theme do you like ?

From a purely personal opinion, I prefer the dark theme as its easier on the eyes .

Comments