Styling code in Blogger posts

On this plattform (Blogger) I wanted to style the code blocks.

I found one javascript formatter called highlight.js, and it can be found on this link:https://highlightjs.org/ .

To implement this I had to go to the admin-part. Select the menu [Themes], and under the selected theme it is a button named [Edit Html].

And in the window with the hml-code I paste in the following in the <head> section:

<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles//vs.min.css' rel='stylesheet'/>
<script>hljs.initHighlightingOnLoad();</script>

In line 2 you can change vs.min.css with other styles like github.min.css or the darker vs2015.min.css or ocean.min.css.

This will apply style to all the <pre><code>//nnnn</code></pre>.

For this blog theme I have added an override style in [themes] [Customize] [Advanced] [CSS] like this:
pre {
 font-size: 90%!important;0
 line-height:95%!important;
}

This is becuse the font-size is a bit too large for code-examples.

And since I had i little problem with adding a code-block inside the pre-bloc for examples I descided to just use pre-tags. So the script for editing is then:

<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles//vs.min.css' rel='stylesheet'/>

<script>
 document.addEventListener("DOMContentLoaded", (event) => {
    document.querySelectorAll("pre").forEach((block) => {
       hljs.highlightBlock(block);
    });
 });
 </script>

Comments

Post a Comment

Popular posts from this blog

Custom Pushpin in Bing Maps Control for WPF

Image
Pushpins in "Bing Maps Control for WPF" can be styled in XAML. The code below may seem a bit much, but this is actually very flexible and easy to adjust. And it doesn't require code-behind that is forgotten when copying, problems with change of names that isn't reflected in code or overriding rendering events. It also get additional benefits at a later stage since this can also contain text( see below ) be data-bound, bound to other controls or templates or be rotated and transformed. We could also control size or placement according to converters related to real-world sizes like meters or have it's visbility set according to zoom-level. This is out of scope here but I will try to get to that later. In the example below the styles are placed inside the map-control in <m:Map.Resources> . This is handy when designing or for a cut-copy-paste library. But this get quite a bit readable when it's moved into an Application.Resource in App.Xaml or in it...
Read more

Bing Maps Control for WPF with Essential Tools

There are alternatives, but the basic Bing Maps for WPF has a lot of resources and a strong documentation available. Microsoft has moved the focus to the UWP-version and the WEB-version, but for desktop applications that requires local file operations this is still the basic tool. I have been using " XAML Map Control " by Clemens Ficher a lot. But since that control is modelled after the features of "BingMaps"the toolkits below will still be relevant. To get started we should get the bing-map-key from Microsoft here: https://www.bingmapsportal.com/ First off there is the Control itself. It can be found on Nuget: PM> Install-Package Microsoft.Maps.MapControl.WPF Then I add the Spatial Toolbox ( see below ). This is not on Nuget, so you have to download it , unpack it, and then include it to your project. You can add a reference to the toolbox project to your solution (Located in the archive folders, and named: Microsoft.Maps.SpatialToolbox.Core and Micros...
Read more

Tip to enable key-events in WPF

Working on a project with editing shapes I came over a problem when I wanted to canced the operation when the user pressed the escape-key. When I added an event handler for KeyPress or KeyDown or even PreviewKeyDown it never fired. This was because the graphical elements didn't actully have focus. For my user-control for the graphic element I solved this by adding this in the constructor: this.Focusable = true; this.FocusVisualStyle = null; The second line ensured that the dotted focus-rectangle also disseapeared. For a xaml-based approach this is the markup: <Canvas Focusable="True" FocusVisualStyle="{x:Null}">  <!-- The shapes or elements like an elipse, rectangle, path or stack-panel... --> </Canvas>
Read more