A simple approach

My friend pointed out to me that the formatting on my code blocks is terrible, just grey and boring. It used to be ok before my redesign, but I missed it out this time around. Anyway, I think I found the one I used to use before. Google Code Prettify. Just add a reference to the javascript file:

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

To use it you can add the class "prettyprint" to your pre tags like this:

<pre class="prettyprint">
</pre>

I'm lazy

Then I realised it would be a pain to have to go through all of my posts for the last 12 months and add this class to each pre tag, so I edited the partial view in Umbraco which renders the content grid. I made it replace any opening pre tags with a pre tag with the class of prettyprint.

The partial is in Views > Partials Views > Grid > Editors > Rte

You can change it to this:

@model dynamic
@using Umbraco.Web.Templates

@Html.Raw(TemplateUtilities.ParseInternalLinks(Model.value.ToString().Replace("<pre>","<pre class=\"prettyprint\">")))

Now my pre tags are formatted automatically and I don't need to add a class to them.

Paul Seal

Umbraco MVP and .NET Web Developer from Derby (UK) who specialises in building Content Management System (CMS) websites using MVC with Umbraco as a framework. Paul is passionate about web development and programming as a whole. Apart from when he's with his wife and son, if he's not writing code, he's thinking about it or listening to a podcast about it.

Proudly sponsored by

Moriyama

  • Moriyama build, support and deploy Umbraco, Azure and ASP.NET websites and applications.
AppVeyor

  • CI/CD service for Windows, Linux and macOS
  • Build, test, deploy your apps faster, on any platform.
elmah.io

  • elmah.io is the easy error logging and uptime monitoring service for .NET.
  • Take back control of your errors with support for all .NET web and logging frameworks.
uSync Complete

  • uSync.Complete gives you all the uSync packages, allowing you to completely control how your Umbraco settings, content and media is stored, transferred and managed across all your Umbraco Installations.
uSkinned

  • More than a theme for Umbraco CMS, take full control of your content and design with a feature-rich, award-nominated & content editor focused website platform.
UmbHost

  • Affordable, Geo-Redundant, Umbraco hosting which gives back to the community by sponsoring an Umbraco Open Source Developer with each hosting package sold.