After struggling with code-syntax highlighting in css, I have a lot of respect for the frontend-devs that create color palettes for programmers.

As you can see on this page, I’m more of a backend, brute-force dev! Haha.

Anyway, in this post, I’ll play around with the code syntax color palette. I’m using the Darcula Color Palette with my common languages to get something that hopefully isn’t horrible on the eyes.

Right now, I have no idea what css variables control the appearance of the code in the <pre><code> blocks. So, as always, trial-and-error is the best way to learn!

First comes Python,

# -*- coding: utf-8 -*-
import foo


class Foo():
    def __init__(self):
    """single line docstring"""
        pass
    def func(self):
        pass  # inline comment


if __name__ == "__main__":
    """This is a multiline
    comment
    """
    # this is a comment
    Foo()

Then comes go,

import "fmt"

// foo is a function
func foo() {
  // this is a comment
  fmt.Println("foo")  // inline comment
}

func main() {
   foo()
}

The comes c++,

#include <iostream>

// TODO: Implement Foo
class Foo {
 public:
  Foo(const std::string& name); // inline comment
  const std::string& GetName() const;
 private:
  const std::string name_;
};

Foo::Foo(const std::string& name)
    : name_(name) {
}

const std::string& Foo::GetName() const { return name_; }

int main(int argc, char** argv) {
  Foo foo("foo");
  std::cout << foo.GetName() << std::endl;
  return 0;
}

And bash,

# this is a comment
FOO="bar"
function hello() {
  echo $FOO
}

And Docker,

# comment
FROM docker.io/prom/prometheus
COPY config/prometheus.yaml /etc/prometheus/

And a Makefile,

.PHONY: help
help: ## The default task is help.
	@awk 'BEGIN {FS = ":.*?## "} /^[a-zA-Z_-]+:.*?## / {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}' $(MAKEFILE_LIST)
.DEFAULT_GOAL := help

help: ## just say hello
	 echo "hello world!"

Code Syntax Highlights with CSS