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.

    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.