How to: Add a ‘Copy Code’ Link to Your Blog Post and Colored Code Blocks

Artikel
03/21/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 <style> definitions. The MSDN blogs parse out these styles so you end up having to manually adding these styles to your blog’s theme (yuck).

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:

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

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

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

Copy Code:
```
 <pre id="CopyCodeCodeSection1" 
```

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

Copy Code:

 <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 <a> tag like this:

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

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'

Comments

Anonymous
July 12, 2013
Thanks for the help I have been looking for some good <a href="http://peterpauloffice.com">color copy machines in Cincinnati OH</a>.

Freigeben über