<!-- livebook:{"persist_outputs":true} -->

# Code Block Decorators

```elixir
Mix.install([
  {:mdex, "~> 0.8.1"},
  {:kino, "~> 0.16"}
])
```

## Intro

Code block decorators let you add metadata to fenced code blocks using key-value pairs in the info string. Use them to highlight specific lines, apply custom themes per block, or add other visual enhancements without modifying the code itself.

All options and more examples at [Guides / Code Block Decorators](https://hexdocs.pm/mdex/code_block_decorators-2.html)

## Decorator: highlight_lines

````elixir
import MDEx.Sigil

~MD"""
```elixir highlight_lines=2,5,8-10 theme=github_light
defmodule Lines do
  @langs ["elixir", "rust"]

  def langs do
    @langs
  end

  def libs do
    [:comrak, :ammonia, :lumis]
  end
end
```
"""HTML
|> Kino.HTML.new()
````

## Decorator: theme

````elixir
import MDEx.Sigil

~MD"""
```elixir theme=gruvbox_light
defmodule Lines do
  @langs ["elixir", "rust"]

  def langs do
    @langs
  end

  def libs do
    [:comrak, :ammonia, :lumis]
  end
end
```
"""HTML
|> Kino.HTML.new()
````

## Decorator: highlight_lines_style

````elixir
import MDEx.Sigil

~MD"""
```elixir highlight_lines=2 highlight_lines_style="background-color: purple; font-weight: bold; font-size: 18px"
defmodule Lines do
  @langs ["elixir", "rust"]

  def langs do
    @langs
  end

  def libs do
    [:comrak, :ammonia, :lumis]
  end
end
```
"""HTML
|> Kino.HTML.new()
````

## Decorator: include_highlights

````elixir
~MD"""
```elixir include_highlights
defmodule Lines do
  @langs ["elixir", "rust"]

  def langs do
    @langs
  end

  def libs do
    [:comrak, :ammonia, :lumis]
  end
end
```
"""HTML
|> Kino.HTML.new()
````