Code Blocks

API Docs

Code blocks are a great way to display code snippets in your site or documentation. They can be used to show examples, provide context, or call out something important.

Basic Code Block

A basic code block is just a simple block of code with no additional styling. You can pass the prefix attribute to add a prefix to the code block.

echo "Hello, world!"

= daisy_code(prefix: "$") do
  echo "Hello, world!"

Multi-line Code Block

You can also create multi-line code blocks by calling the with_line slot multiple times.

yarn add @profoundry-us/loco_motion

Installing...

Done!

= daisy_code do |code|
  - code.with_line(prefix: "$") do
    yarn add @profoundry-us/loco_motion
  - code.with_line(prefix: ">", css: "text-warning") do
    Installing...
  - code.with_line(prefix: ">", css: "text-success") do
    Done!

Full Code Blocks

You can also pass full code blocks by utilizing the :plain filter provided by HAML.

Warning

You cannot use the prefix option and the :plain filter at the same time as we have to apply some special styling.

def hello_world
  puts "Hello, world!"
end

= daisy_code do
  :plain
    def hello_world
      puts "Hello, world!"
    end

Numbered / Highlighted Lines

You can also highlight specific lines in your code block by utilizing standard Tailwind classes.

Here is the first line

Here is the second line

Here is the third line

Here is the fourth line

Here is the fifth line

= daisy_code do |code|
  - code.with_line(prefix: "1") do
    Here is the first line
  - code.with_line(prefix: "2") do
    Here is the second line
  - code.with_line(prefix: "3", css: "bg-warning text-warning-content") do
    Here is the third line
  - code.with_line(prefix: "4") do
    Here is the fourth line
  - code.with_line(prefix: "5", css: "bg-green-400 text-purple-600") do
    Here is the fifth line

Made with by Profoundry .

Code Blocks

Basic Code Block

Multi-line Code Block

Full Code Blocks

Numbered / Highlighted Lines

Docs

Guides

Loco

Daisy