JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Prism.js Background</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet">
    <style>
        /* Custom Prism.js theme */
        pre {
            background-color: #282c34; /* Dark background color */
            color: #abb2bf; /* Light text color for contrast */
            padding: 16px; /* Optional padding */
            border-radius: 4px; /* Optional rounded corners */
            overflow: auto; /* Add scrollbar if needed */
        }

        code {
            background: transparent; /* Ensure no background color for code element */
        }

        /* Optional: Customize token colors */
        .token.comment {
            color: #5c6370; /* Gray for comments */
        }

        .token.keyword {
            color: #c678dd; /* Purple for keywords */
        }

        .token.string {
            color: #98c379; /* Green for strings */
        }

        .token.function {
            color: #61afef; /* Blue for functions */
        }
    </style>
</head>
<body>
    <pre><code class="language-js">
/* Example code block */
function helloWorld() {
    console.log('Hello, world!');
}
    </code></pre>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
</body>
</html>