PRISM SYNTAX HIGHLIGHTER

Now that this blog has accumulated a few posts with code—either Python or SVG—that is intended to be copied by the user, it would be nice to find a more clear and convenient way to present it.

I would prefer to learn the necessary markup on my own—I already added buttons to highlight and automatically copy code to the Clipboard—but I'm curious to see how a dedicated service does it.

One option is Prism for syntax highlighting and line numbering and GoFile for free hosting of the prism.css and prism.js CDN files (and perhaps the SVG files as well).

This is not an advertisement or endorsement for either service—particularly GoFile, which seems too good to be true, frankly. I just want to do a test for now.

[Edit: GoFile does have a major catch: I just read the FAQ and files may be deleted after 10 days of inactivity. Time to start using Google Drive finally.]

Here is the "Coy" theme for Python syntax styling with optional line numbering added:

# Define variables
path = 'E:/goes-16-data/full-disk/multi-band/'
year = '2020' # YYYY
date = '0415' # MMDD
time = '1430' # hhmm

###############################
# DO NOT EDIT BELOW THIS LINE #
###############################

# Load Python libraries
from netCDF4 import Dataset
import numpy as np
import cv2

# Variables
if mode == 'OBS':
    v_mode = 'scaled_radiance'

if mode == 'BRF':
    v_mode = 'brf'

full_path = path + year + '/' + date + '/' + time + '/'
date_name = year + date + time
save_file = 'Himawari-8_' + date_name + '_' + mode + '_' + size + '.png'

# Himawari 8 files
nc1_file = date_name + '00-P1S-ABOM_' + mode + '_B01-PRJ_GEOS141_' + size + '-HIMAWARI8-AHI.nc'
nc2_file = date_name + '00-P1S-ABOM_' + mode + '_B02-PRJ_GEOS141_' + size + '-HIMAWARI8-AHI.nc'
nc3_file = date_name + '00-P1S-ABOM_' + mode + '_B03-PRJ_GEOS141_' + size + '-HIMAWARI8-AHI.nc'
nc4_file = date_name + '00-P1S-ABOM_' + mode + '_B04-PRJ_GEOS141_' + size + '-HIMAWARI8-AHI.nc'

There also is an option to add a copy text button but I'm not using it. I'm sure their Javascript implementation is far better and more robust than mine though. Perhaps I can figure out a way to link their script to my buttons instead.

I do like the syntax highlighting style and overall ease of use. Before I would have to use a third-party syntax highlighter (which added a lot of markup bloat and clutter) and then paste that into the post HTML.

Adding line numbers, although simple in principle, would be even more involved to do manually and would add yet more bloat.

Now let's see how easy or hard it is to change some of the styling. I will create a new class for the <pre> tag named my-custom-pre first. Then I need to open prism.css and find and copy the style declarations to change. I want to remove the padding and the thick blue border and change the number background and thin gray border.

.my-custom-pre {
  padding: 0 !important;
}
.my-custom-pre > code {
  border-left: none !important;
}
.my-custom-pre.line-numbers .line-numbers-rows {
  background: #eed;
  border-right: 2px solid #64aa32;
}

Lastly, I have to edit the Blogger template to include the new styling. And the result:

import numpy as np
import cv2

# New pseudo-green channel formula
# This is still experimental!
# 
# Blend the B channel and R channel
G_base = cv2.addWeighted(B, 0.38, R, 0.62, 0)

# Use the I channel to lighten G_base using np.maximum
# This will increase the vegetation signal
G_veg = cv2.addWeighted(G_base, 0.97, np.maximum(G_base, I), 0.03, 0)

# Blend the B channel to decrease the signal
# in predominantly red/orange soil regions
G_soil = new_G = cv2.addWeighted(G_veg, 0.41, np.minimum(G_veg, B), 0.59, 0)

If I want all code snippets to appear this way I can either

a) Add the new class to each of them.
b) Make a new stylesheet and upload and link to it.
c) Apply the changes universally to all <pre> and <code> tags.
d) Edit the prism.css stylesheet and upload it again.

The last two options will mess up this post so option (a) it will be.

Now to figure out what to do about the copy button...

[Edit: May 15, 2021] I host the prism.css and prism.js files on Google Drive and recently, due to unspecified "technical difficulties" there, the Javascript file will not automatically download. That means Prism will not work without a MIME type workaround on Google Drive. Hopefully this will be resolved because changing the MIME type comes with its own set of issues.

[Edit: March 7, 2024] Google Drive no longer works for hosting the Prism files. I'm using Microsoft OneDrive for the time being.

I followed the instructions here for parsing the OneDrive links into direct download links. I skipped Step 4 and instead pasted the links following the instructions at the Prism site. This requires editing the Blogger HTML template. Be sure to back up your template first!