A new code prettyfier

A new code prettyfier

Well, that didn’t last long. I thought SyntaxHighlighter and Copy Code to Clipboard were great plugins for my Blog, but then I found Code Block Pro.

This plugin has so many features it is crazy. It is built on top of Visual Studio Code and handles every language and file type that VS Code can handle, and there are so many themes and features available, even in the free version.

One feature that my previous choices didn’t have without quite a bit of messing around was showing/hiding line numbers. I never liked that line numbers appeared on Powershell or Bash blocks. Now, it is just a single click away. Another great feature is the ability to blur out code and highlight specific areas to draw the reader’s eye to what is important – fantastic.

Here are a few examples of what it can look like: –

apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  name: pvc-homarr-icons
spec:
  accessModes:
    - ReadWriteOnce
  storageClassName: longhorn
  resources:
    requests:
      storage: 1Gi

apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  name: pvc-homarr-icons
spec:
  accessModes:
    - ReadWriteOnce
  storageClassName: longhorn
  resources:
    requests:
      storage: 1Gi

YAML
apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  name: pvc-homarr-icons
spec:
  accessModes:
    - ReadWriteOnce
  storageClassName: longhorn
  resources:
    requests:
      storage: 1Gi

apiVersion: v1
kind: PersistentVolumeClaim
metadata:
  name: pvc-homarr-icons
spec:
  accessModes:
    - ReadWriteOnce
  storageClassName: longhorn
  resources:
    requests:
      storage: 1Gi

Another great feature is that the code widget remembers the latest settings you used and applies them automatically the next time you add a block – that is, it uses the sensible settings from the previous block – it doesn’t remember the previous settings regarding highlighting lines which is a very nice quality of life feature. This makes adding new sections much quicker than before.

One thing I didn’t realise at first is that the Dark Plus theme is almost identical to the theme I use inside Visual Studio and Visual Studio Code, so the code looks the same on the site, too.

Unlike my previous code blocks editor, the code looks the same when editing it in the WordPress admin site, too. Previously, the code was black text on a white background, which meant finding a block was a little more work when editing a post.

The toolbar that appears when you are editing a block has shortcuts to the block settings, which makes it much easier to navigate to the right areas to make changes.

All in all, it is a very nice addition to the site.

Stephen

Hi, my name is Stephen Finchett. I have been a software engineer for over 30 years and worked on complex, business critical, multi-user systems for all of my career. For the last 15 years, I have been concentrating on web based solutions using the Microsoft Stack including ASP.Net, C#, TypeScript, SQL Server and running everything at scale within Kubernetes.