Display Code in SharePoint as HTML

  • Article

I saw this question asked on Twitter, and thought of this idea.  Was pretty simple, so I thought I would share.  What if you wanted to display a code example in SharePoint?  It could be on a page, blog post, wiki, etc…  For this specific question, it was in reference to displaying code on a SharePoint page.  This quick 2 step process can achieve the end result.

1. Code Snippet for Windows Live Writer

Windows Live Writer (a free product) has a great add-on, the Code Snippet plug-in.  You can download it from the the Live Gallery here: https://gallery.live.com/liveItemDetail.aspx?li=d4409446-af7f-42ec-aa20-78aa5bac4748&bt=9 

With this plug-in, you can paste in code (in my example there is some XML), and it will format the code as HTML.  You have options for line numbers, alternate lines, etc…  The formatting changes based upon a selection of what your example code is (C#, HTML, JavaScript, etc…).  

Utilizing this plug-in, you can then select the source button (circled in the image), and copy the html source for this HTML display.

image

2.   HTML Source to SharePoint

Now that you have the HTML Source for your code display, you can implement it in SharePoint.  For this specific example, we will use a Content Editor Web Part.  Edit your page, and add a Content Editor Web Part to it.  On the web part properties, select the Source Editor.

 

image

In the Source Editor, paste in your HTML Source copied from the code snippet plug-in from the 1st step of the process.  Now save your source and apply your changes to the web part.

image

Viola!  You now have your code displayed on SharePoint.