Use VSCode Theme Synthwave '84 in your website syntax highlighting

#css #vscode

I have a huge reason to cheer right now. I made my very first open source contribution 🎉🎉🎉🥳

For a couple of months now I've been using this awesome VS Code theme called Synthwave '84 by Robb Owen.

I liked it that much that I wanted to use it as syntax highlighting theme for my blog.

I use PrismJS as syntax highlighting tool, but the theme could not be found there, so I decided to give it a try and port Robb's theme to Prism.

You can check out the theme here:
https://github.com/themarcba/prism-themes/blob/master/themes/prism-synthwave84.css

In order to use it, you just need a code.language-* within a pre.language-* element and add the prism.js file. (* stands for the language you want to highlight, e.g. javascript, css)

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <link rel="stylesheet" href="./prism-synthwave84.css">
</head>
    <body>
        <pre class="language-javascript">
            <code class="language-javascript">
                // Some JavaScript code here...
                const performances = ['🎺', '🎸', '🎤']
                performances.forEach(performance => {
                    let me = entertain(you, performance)();
                });
            </code>
        </pre>
        <script src="./prism.js"></script>
    </body>
</html>