Blocks

Codeblock

Syntax-highlighted code rendered server-side via Rouge. Light/dark themes auto-switch with the theme switcher.

Usage

codeblock(code, syntax:) formats a string through Rouge's Github theme and emits an inline <style> block with both light and dark rules scoped to .shadcnrb-code.

class Greeting
  def initialize(name)
    @name = name
  end

  def to_s
    "Hello, !"
  end
end

live_example do
  sui.codeblock <<~RUBY, syntax: :ruby
    class Greeting
      def initialize(name)
        @name = name
      end

      def to_s
        "Hello, #{@name}!"
      end
    end
  RUBY
end

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    console.log("connected", this.element)
  }
}

live_example do
  sui.codeblock <<~JS, syntax: :javascript
    import { Controller } from "@hotwired/stimulus"

    export default class extends Controller {
      connect() {
        console.log("connected", this.element)
      }
    }
  JS
end

Theme integration

Mount the theme styles once in your layout <head> with sui.codeblock_theme_styles. Light rules apply by default; .dark .shadcnrb-code rules override when the .dark class is on <html>.