highlight.js theme selector

This project demonstrates a method to make different themes of highlight.js to coexist on the same page by scoping each theme to a particular component by prefixing CSS files with the name of the theme.

The page is split up to two parts: dark and light, and each theme is displayed on both sides.

This presentation allows choosing a theme best matching required background, whether it be for a light-themed or dark-themed site

The full article is available here:

Highlight your code: scope highlight.js theme to a single component

The code of the project is available here:

https://github.com/epanikas/nextjs-tailwind-highlight-js-theme-selector

Light background

1c-light

public class Person {
    private String name;
    private int age;
}

a11y-dark

public class Person {
    private String name;
    private int age;
}

a11y-light

public class Person {
    private String name;
    private int age;
}

agate

public class Person {
    private String name;
    private int age;
}

an-old-hope

public class Person {
    private String name;
    private int age;
}

androidstudio

public class Person {
    private String name;
    private int age;
}

arduino-light

public class Person {
    private String name;
    private int age;
}

arta

public class Person {
    private String name;
    private int age;
}

ascetic

public class Person {
    private String name;
    private int age;
}

atom-one-dark-reasonable

public class Person {
    private String name;
    private int age;
}

atom-one-dark

public class Person {
    private String name;
    private int age;
}

atom-one-light

public class Person {
    private String name;
    private int age;
}

brown-paper

public class Person {
    private String name;
    private int age;
}

codepen-embed

public class Person {
    private String name;
    private int age;
}

color-brewer

public class Person {
    private String name;
    private int age;
}

dark

public class Person {
    private String name;
    private int age;
}

default

public class Person {
    private String name;
    private int age;
}

devibeans

public class Person {
    private String name;
    private int age;
}

docco

public class Person {
    private String name;
    private int age;
}

far

public class Person {
    private String name;
    private int age;
}

felipec

public class Person {
    private String name;
    private int age;
}

foundation

public class Person {
    private String name;
    private int age;
}

github-dark-dimmed

public class Person {
    private String name;
    private int age;
}

github-dark

public class Person {
    private String name;
    private int age;
}

github

public class Person {
    private String name;
    private int age;
}

gml

public class Person {
    private String name;
    private int age;
}

googlecode

public class Person {
    private String name;
    private int age;
}

gradient-dark

public class Person {
    private String name;
    private int age;
}

gradient-light

public class Person {
    private String name;
    private int age;
}

grayscale

public class Person {
    private String name;
    private int age;
}

hybrid

public class Person {
    private String name;
    private int age;
}

idea

public class Person {
    private String name;
    private int age;
}

intellij-light

public class Person {
    private String name;
    private int age;
}

ir-black

public class Person {
    private String name;
    private int age;
}

isbl-editor-dark

public class Person {
    private String name;
    private int age;
}

isbl-editor-light

public class Person {
    private String name;
    private int age;
}

kimbie-dark

public class Person {
    private String name;
    private int age;
}

kimbie-light

public class Person {
    private String name;
    private int age;
}

lightfair

public class Person {
    private String name;
    private int age;
}

lioshi

public class Person {
    private String name;
    private int age;
}

magula

public class Person {
    private String name;
    private int age;
}

mono-blue

public class Person {
    private String name;
    private int age;
}

monokai-sublime

public class Person {
    private String name;
    private int age;
}

monokai

public class Person {
    private String name;
    private int age;
}

night-owl

public class Person {
    private String name;
    private int age;
}

nnfx-dark

public class Person {
    private String name;
    private int age;
}

nnfx-light

public class Person {
    private String name;
    private int age;
}

nord

public class Person {
    private String name;
    private int age;
}

obsidian

public class Person {
    private String name;
    private int age;
}

panda-syntax-dark

public class Person {
    private String name;
    private int age;
}

panda-syntax-light

public class Person {
    private String name;
    private int age;
}

paraiso-dark

public class Person {
    private String name;
    private int age;
}

paraiso-light

public class Person {
    private String name;
    private int age;
}

pojoaque

public class Person {
    private String name;
    private int age;
}

purebasic

public class Person {
    private String name;
    private int age;
}

qtcreator-dark

public class Person {
    private String name;
    private int age;
}

qtcreator-light

public class Person {
    private String name;
    private int age;
}

rainbow

public class Person {
    private String name;
    private int age;
}

routeros

public class Person {
    private String name;
    private int age;
}

school-book

public class Person {
    private String name;
    private int age;
}

shades-of-purple

public class Person {
    private String name;
    private int age;
}

srcery

public class Person {
    private String name;
    private int age;
}

stackoverflow-dark

public class Person {
    private String name;
    private int age;
}

stackoverflow-light

public class Person {
    private String name;
    private int age;
}

sunburst

public class Person {
    private String name;
    private int age;
}

tokyo-night-dark

public class Person {
    private String name;
    private int age;
}

tokyo-night-light

public class Person {
    private String name;
    private int age;
}

tomorrow-night-blue

public class Person {
    private String name;
    private int age;
}

tomorrow-night-bright

public class Person {
    private String name;
    private int age;
}

vs

public class Person {
    private String name;
    private int age;
}

vs2015

public class Person {
    private String name;
    private int age;
}

xcode

public class Person {
    private String name;
    private int age;
}

xt256

public class Person {
    private String name;
    private int age;
}

Dark background