Code view
A block of source to read or copy: coloured with Rouge, wrapping long lines, with a copy button that appears on hover and stays put on touch screens. Just the code; put it in a panel or a card for a heading.
Any language Rouge knows
language: names the lexer. Long lines wrap by default, and the copy button copies the source as written.
{
"name": "unmagic-components",
"version": "0.6.0",
"tailwind": true,
"components": ["code_view", "panel", "tabs"]
}class Deploy
# Ship what's on main to every kiln that answers.
def call(kilns = Kiln.online)
kilns.each { |kiln| kiln.pull!(branch: "main") }
rescue Kiln::Unreachable => error
Rails.logger.warn "skipped #{error.kiln.name}: it's asleep"
end
end<div class="grid gap-4 lg:grid-cols-2">
<%= code_view language: :json do %>
{
"name": "unmagic-components",
"version": "0.6.0",
"tailwind": true,
"components": ["code_view", "panel", "tabs"]
}
<% end %>
<%= code_view language: :ruby do %>
class Deploy
# Ship what's on main to every kiln that answers.
def call(kilns = Kiln.online)
kilns.each { |kiln| kiln.pull!(branch: "main") }
rescue Kiln::Unreachable => error
Rails.logger.warn "skipped #{error.kiln.name}: it's asleep"
end
end
<% end %>
</div>Numbered, and capped in height
lines: true numbers the lines without putting the numbers in a copy. max_height: makes the block scroll, and a block that can scroll is focusable and named for a keyboard.
<%= table_for @users do |table| %>
<% table.empty "No team members yet." %>
<% table.column "Name", width: "38%" do |user| %>
<%= link_to user.name, user %>
<% end %>
<% table.column "Created", sort: :created_at, direction: :desc do |user| %>
<%= user.created_at.to_fs(:short) %>
<% end %>
<% table.column "Logins", :sign_in_count, numeric: true %>
<% table.column "Role", :role %>
<% table.column "Last seen", :last_seen_at %>
<% end %>
<%= code_view language: :erb, lines: true, max_height: "14rem", label: "Table example" do %>
<%%= table_for @users do |table| %>
<%% table.empty "No team members yet." %>
<%% table.column "Name", width: "38%" do |user| %>
<%%= link_to user.name, user %>
<%% end %>
<%% table.column "Created", sort: :created_at, direction: :desc do |user| %>
<%%= user.created_at.to_fs(:short) %>
<%% end %>
<%% table.column "Logins", :sign_in_count, numeric: true %>
<%% table.column "Role", :role %>
<%% table.column "Last seen", :last_seen_at %>
<%% end %>
<% end %>Scrolling sideways instead
wrap: false keeps every line on one line, for a table drawn in text or a command that must not break. copy: false drops the button.
# A long line stays a line: scroll to read it, or copy it whole.
curl -X POST https://api.example.com/v1/renders --header "Authorization: Bearer $TOKEN" --header "Content-Type: application/json" --data '{"scene": "kitchen", "width": 1920, "height": 1080, "samples": 256}'<%= code_view language: :shell, wrap: false, copy: false do %>
# A long line stays a line: scroll to read it, or copy it whole.
curl -X POST https://api.example.com/v1/renders --header "Authorization: Bearer $TOKEN" --header "Content-Type: application/json" --data '{"scene": "kitchen", "width": 1920, "height": 1080, "samples": 256}'
<% end %>