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.

Preview

echo "Hello, world!"

Code

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

Preview

yarn add @profoundry-us/loco_motion

Installing...

Done!

Code

= 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!

Code Block with Language

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

Preview

def hello_world
  puts "Hello, world!"
end

Code

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

Preview

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

Code

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