Settings: Syntax Highlighting

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.

Preview

You can preview what the site looks with this syntax highlighting theme while you remain on this page.

class Examples::Counter
  include ActiveModel::API
  include ActiveModel::Attributes

  attribute :count, :integer, default: 0

  def to_param
    "counter"
  end
end

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;
}

import { Application } from '@hotwired/stimulus';

const application = Application.start();

// Configure Stimulus development experience
application.debug = false;
window.Stimulus = application;

export { application };

<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.