Adding custom syntax highlighting css

Help
1

Hi, I’m trying to integrate syntax highlighting for Agda (an interactive theorem prover) in my under construction miminal-mistakes site. This is nontrivial because during agda development, syntax highlighting is only available if the code typechecks, and therefore, when converting to html, pdf, etc, one has to actually typecheck agda files before the syntax highlighting works.

There is a default markdown for agda files called literate agda which can be automatically generated into html.

Here is an example post with the generated markdown file (where the html is directly embedded in the .md), where I used the default minimal blog post category. You can see there is no syntax highlighting (as well as broken hyperlinks to the generated standard library definitions). When you generate the html, Agda automatically generates a Agda.css file, and I’m not sure where to put this and how to integrate it with the /_sass that comes with minimal mistakes out of the box (i tried running a css to scss converter to no avail, not sure the differences).

I see one can do custom layouts with custom css, but am not sure if this is the right solution for my problem - I assume it should be simpler to solve.

The desired behavior, look, and feel could come from this blogpost by Jesper, where you can see the hyperlinks actually work - he uses hakyll so I don’t know how much of what he does is fully translatable.

Any help or suggestions are more than welcome.

2

That custom layouts tutorial gets you on the right track.

But… it assumes you have Agda as a CSS file in repo directly OR installed using a gem. I’m guessing neither is practical here.

So going to suggest another option. Also I am going to disregard the if statement and to assume you want this CSS on every page. You can add the if statement later and control a variable from config if you care about selectively enabling the CSS on certain directories

Create this in your repo.

_includes/head/custom.html

<link rel="stylesheet" href="{{ site.adga_css }}">

Then in config file set

adga_css: https://example.com/styles.min.css

You’re going to have to look at the Adga docs or inspect an Adga page to see where CSS gets loaded, but the point is your really on external CSS.

3

The more plain Jekyll way is to do an import of that installed CSS file within your Sass flow.

This assumes Agda is a Ruby gem which has a _sass directory.

For example, if you add an import to your existing assets/styles.scss file (or add one to overwrite the theme)

---
---

@import "minima";

Then that will import the minima.scss file from here. Note that you do not actually need a _sass directory in your own repo because Jekyll will look in all installed gems like Minima and Agda until the import is matched.

If Adga is not a gem, you can manually copy the CSS your sass directory which is not nice to maintain.

4

Link is broken going to CSS file