Want to preview a new syntax highlighting theme?
This site uses Pygments-style CSS for syntax highlighting. You can use the select menu to preview a new syntax highlighting theme. I have curated over 90 options for you from sources around the web.
Your syntax highlighting theme
You are currently using the default syntax highlighting theme, Dracula as your syntax highlighting theme.
Toggle this switch to see the syntax highlighting when the site is Light or Dark Mode. Choosing Light Mode or Dark Mode will save in your browser local storage and will persist across page views on your current device. Choose System Mode to remove the saved choice and fall back to your system preference.
Preview
You can preview what the site looks with this syntax highlighting theme while you remain on this page.
Ruby
class Examples::Counter
include ActiveModel::API
include ActiveModel::Attributes
attribute :count, :integer, default: 0
def to_param
"counter"
end
end
CSS
header {
background-color: var(--joy-background-header);
}
.site-header {
width: 100%;
margin-top: var(--grid-gutter);
margin-bottom: var(--grid-gutter);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
JavaScript
import { Application } from '@hotwired/stimulus';
const application = Application.start();
// Configure Stimulus development experience
application.debug = false;
window.Stimulus = application;
export { application };
HTML with ERB
<div class="container lg:mt-12 md:mt-8">
<div class="lg:flex lg:flex-row-reverse">
<article class="prose dark:prose-invert sm:prose-lg lg:prose-xl">
<h2>Example Counter</h2>
<%= turbo_frame_tag dom_id(@examples_counter) do %>
<%= render @examples_counter %>
<% end %>
</article>
</div>
</div>
Your syntax highlighting theme
You are currently using the default syntax highlighting theme, Dracula as your syntax highlighting theme.
Toggle this switch to see the syntax highlighting when the site is Light or Dark Mode. Choosing Light Mode or Dark Mode will save in your browser local storage and will persist across page views on your current device. Choose System Mode to remove the saved choice and fall back to your system preference.