Blocks

Codeblock

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

Installation

bin/rails g shadcnrb:component codeblock

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

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

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

import { Controller } from "@hotwired/stimulus"

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

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

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

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