Jeff Sanders Technical Blog

I am a Microsoft employee that has worked on all aspects of the Web Stack for a long time. I hope these blogs are useful to you! Use this information at your own risk.

<< Go Back

How To Add A Copy Code Link To Your Blog Post And Colored Code Blocks

- 21 Mar 2013

A nice touch to your blog is to have a link to copy the code you have entered.  Another great feature is to have your code colored as it would be in Visual Studio.  There a couple of ways you can do this.  Here is how I prefer to do it!

LiveWriter Plug-in for code formatting

I use LiveWriter so I love to use Plug-Ins when appropriate.  There are some plugins to make code pretty but some require

Install plug-in

In LiveWriter, go to the ‘Insert’ tab and choose ‘Add plug-in’

 

Once there filter by ‘Formatting / clipboard’ and choose ‘Paste from Visual Studio’

Hit the download button, then run the installer.

Now close and restart LiveWriter (don’t forget to save your work).

Use the Plug-in

To use this plugin:

• Copy the code you want from Visual Studio
  • From the ‘Insert’ tab choose the ‘VSPaste’ plug-in (highlighted for you here: </ul>  

  

  Result:

   

      app.addEventListener("activated", function (args) {
      if (args.detail.kind === activation.ActivationKind.launch) {
          if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
              // TODO: This application has been newly launched. Initialize
              // your application here.
          } else {
              // TODO: This application has been reactivated from suspension.
              // Restore application state here.
          }
          if (app.sessionState.history) {
              nav.history = app.sessionState.history;
          }
          args.setPromise(WinJS.UI.processAll().then(function () {
              if (nav.location) {
                  nav.history.current.initialPlaceholder = true;
                  return nav.navigate(nav.location, nav.state);
              } else {
                  return nav.navigate(Application.navigator.home);
              }
          }));
      }
  });
  

   

  Note:  If you disable any plug-in, installing it will not make it show up in the plug-in list.  Simply re-enable it.

  Add a Copy Code link

  You can of course sweep out code and copy it from the page.  I like to provide a ‘Copy Code’ link so I can ensure the blog reader gets all of the code correctly from me (and it is cool).

  To do this you simply need to add a little JavaScript and a give a unique name to the block around the code you just pasted into the document.

  How to add the Copy Code JavaScript to your page </p>

  • Click on the ‘Source’ tab at the bottom LiveWriter and then scroll all the way to the top of the page.
    • Insert this script at the top </ul>

      Copy Code:

      <SCRIPT language=jscript>
      function CopyCode(elemName) {
      var obj = document.getElementById(elemName);
      window.clipboardData.setData("Text", obj.innerText);
      }
      </SCRIPT>
      

    How to use the JavaScript and add Copy Code links

     

    • Still in the Source view, find the code you want to add the Copy Code link to (hint, if you used the VSInsert plug-in it will start with <pre class=”code”> and end with </pre>
      • Give this block of text a unique id.  This id has to unique to your entire blog as well as this page because on your blog home page there may be more than just your current blog with a copy code section (and you would get the wrong one potentially).  </ul>  

      Copy Code: </p>

      <pre id="CopyCodeCodeSection1" 

      • Insert the Copy Code link and use the same id with the link handler like this

       

      Copy Code: </p>

      <strong><a href="javascript:CopyCode('CopyCodeCodeSection1');">Copy Code:</a></strong>
      

      • Add more Copy Code buttons to your code and ensure you increment the name each time for the code id and the text for the javascript (CopyCodeCodeSection2, CopyCodeCodeSection3, CopyCodeCodeSection4, etc…)
      • Save your blog as a draft and see how it works!
        • Note: You will see my ‘Copy Code:’ text has a lightgray background.  I did this by styling the tag like this: <pre class="code"><strong>
          <a style=”background: lightgray;” href=”javascript:CopyCode(‘CopyCodeCodeSection1’);”>Copy Code:</a>
          </strong> </pre></ul>

         

        Summary

        You can feel free to change the formatting or style of you Copy Code: link!  I hope you find this useful so drop me a note if you like it!

        @JsandersRocks, @WSDevSol

        Helpful links

        Windows Live Writer

        Install point for ‘Paste from Visual Studio’

<< Go Back