$ paint examples

← back to github

Replacing <pre> blocks with highlighted syntax

The replace command finds <pre> blocks on an html page and replaces them with highlighted blocks. The command doesn't change to the source file; it outputs a copy of the document.

command
paint replace ./before.html > after.html

Or use watch mode and highlighting will be updated every time you save the source file:

command
paint replace ./before.html --watch -o after.html

Each <pre> block needs a data-paint="language" attribute so paint knows what type of syntax to use. You can set options for all snippets on the cmd line, or apply settings individually for each snippet by setting data attributes. By default, CSS styles will be included in a style block above the syntax. You can change this behavior by breaking styles/content into two operations using some combination of --html-only / --css-only options or data-html-only / data-css-inline attributes.

Check this page before and after syntax highlighting:


Language type

Set with the data-paint="xx" attribute:

<pre data-paint="rs">
use std::io::{BufReader,BufRead};
use std::fs::File;

fn main() {
    let file = File::open("file.txt").unwrap();

    for line in BufReader::new(file).lines() {
        println!("{}", line.unwrap());
    }
}
--line-numbers

Add with the data-line-numbers attribute:

<pre data-paint="py" data-line-numbers>
with open("foobar.txt") as f:
    for line in f:
        process(line)
--gist-like

Add line numbers and header with a data-gist-like attribute. Give it a title with data-title="x"

<pre data-paint="c" data-title="read_file.c" data-gist-like>
#include 
#include 

int main(void)
{
	FILE *stream;
	char *line = NULL;
	size_t len = 0;
	ssize_t read;

	stream = fopen("file.txt", "r");
	if (stream == NULL)
		exit(EXIT_FAILURE);

	while ((read = getline(&line, &len, stream)) != -1) {
		printf("Retrieved line of length %zu :\n", read);
		printf("%s", line);
	}

	free(line);
	fclose(stream);
	exit(EXIT_SUCCESS);
}
--theme

Set with the data-theme="xx" attribute. If you have more than one theme on a page you'll need to use data-css-prefix or data-css-inline to prevent themes from clobbering each other.

<pre data-paint="go" data-theme="dracula" data-css-prefix="dark_example">
package main

import (
	"bufio"
	"fmt"
	"os"
)

func main() {
	inputFile, _ := os.Open("byline.go")
	defer inputFile.Close()

	scanner := bufio.NewScanner(inputFile)

	for scanner.Scan() {
		fmt.Println(scanner.Text())
	}
}