PrismJS Darcula Theme

A syntax highlighting theme for [PrismJS] based on the Darcula theme from the JetBrains IDEs.

GitHub: LucaScorpion/prismjs-darcula-theme

Usage

HTML

Download and include the compiled stylesheet in the head of your html:

<link href="darcula.css" rel="stylesheet" />

Gatsby

This theme can be used in Gatsby with gatsby-remark-prismjs. Simply install the package using:

npm install prismjs-darcula-theme

And add this line in gatsby-browser.js:

import 'prismjs-darcula-theme/darcula.css';

Examples

JavaScript

class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  /**
   * Calculate the circumference of the circle.
   *
   * @return {number}
   */
  circumference() {
    return 2 * Math.PI * this.radius;
  }
}

const c = new Circle(0.5);
console.log(c.circumference()); // 3.1415...

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Example</title>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body id="home">
        <!-- Todo: write actual content -->
        <div>Lorem ipsum dolor sit amet</div>
    </body>
</html>

Java

import java.util.ArrayList;
import java.util.List;

@Name("program")
public class Program {
    public static void main(String[] args) {
        List<String> valid = new ArrayList<>();

        for (int i = 0; i < args.length; i++) {
            String arg = args[i];

            if (isValid(arg)) {
                valid.add(arg);
            }
        }
    }

    /**
     * Check if an argument is valid.
     *
     * @param arg The argument to check.
     * @return Whether the argument is valid.
     */
    private static boolean isValid(String arg) {
        return true; // Todo: Do actual check.
    }
}

CSS

main {
    background-image: url('some/image.jpg');
}

.list > .row {
    display: flex;
    color: #6a8759;
}

/* Small screen rules */
@media screen and (max-width: 800px) {
    .row {
        flex-direction: column !important;
    }
}

JSON

{
  "ok": true,
  "list": [
    1,
    2,
    3
  ],
  "string": "This is JSON",
  "nested": {
    "object": false
  }
}

YAML

# A comment
version: '3.7'
services:
  rabbitmq:
    image: rabbitmq:3.7-management
    ports:
      - 15672:15672
      - 5672:5672