93 lines
3.1 KiB
Elixir
93 lines
3.1 KiB
Elixir
defmodule ZoeyscomputerWeb.CodeBlock do
|
|
use Phoenix.Component
|
|
|
|
import ZoeyscomputerWeb.CoreComponents
|
|
|
|
@moduledoc """
|
|
A code block component with syntax highlighting using Shiki.
|
|
|
|
## Features:
|
|
- Syntax highlighting with Shiki
|
|
- Optional line numbers
|
|
- Optional highlighted lines
|
|
- Optional title
|
|
- Copy button
|
|
- Catppuccin theme styling
|
|
"""
|
|
|
|
@doc """
|
|
Renders a code block with syntax highlighting.
|
|
|
|
## Examples
|
|
|
|
<.code_block
|
|
code="def hello, do: :world"
|
|
language="elixir"
|
|
title="Example Code"
|
|
line_numbers={true}
|
|
highlighted_lines={[1, 3]}
|
|
/>
|
|
|
|
## Options
|
|
* `:code` - Required. The code string to highlight
|
|
* `:language` - Required. Programming language for syntax highlighting
|
|
* `:title` - Optional. Title displayed above the code block
|
|
* `:line_numbers` - Optional. Show line numbers (default: false)
|
|
* `:highlighted_lines` - Optional. List of line numbers to highlight
|
|
"""
|
|
attr :code, :string, required: true
|
|
attr :language, :string, required: true
|
|
attr :title, :string, default: nil
|
|
attr :class, :string, default: ""
|
|
attr :line_numbers, :boolean, default: false
|
|
attr :highlighted_lines, :list, default: []
|
|
|
|
def code_block(assigns) do
|
|
# Calculate the number of lines for line numbers
|
|
assigns = assign(assigns, :num_lines, String.split(assigns.code, "\n") |> length())
|
|
|
|
id = System.unique_integer()
|
|
|
|
~H"""
|
|
<div class={"relative rounded-lg overflow-hidden w-full bg-ctp-mantle border border-ctp-surface0 #{@class} "}>
|
|
<%= if @title do %>
|
|
<div class="bg-ctp-crust px-4 py-2 border-b border-ctp-surface0">
|
|
<h3 class="ctp-text-text text-[0.75rem] font-medium"><%= @title %></h3>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="overflow-x-scroll bg-ctp-mantle">
|
|
<div class="relative bg-ctp-crust">
|
|
<%= if @line_numbers do %>
|
|
<div class="absolute bg-ctp-crust left-0 top-0 bottom-0 ctp-bg-crust min-w-12 flex flex-col items-end py-4 ctp-text-surface2 select-none">
|
|
<%= for line_num <- 1..@num_lines do %>
|
|
<span class={[
|
|
"text-sm leading-6 pr-2",
|
|
line_num in @highlighted_lines &&
|
|
"text-ctp-mauve bg-ctp-mauve/15 w-full text-right font-bold"
|
|
]}>
|
|
<%= line_num %>
|
|
</span>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class={["bg-ctp-mantle overflow-x-scroll pb-0.5", @line_numbers && "pl-12"]}>
|
|
<pre
|
|
class="p-4 leading-6 text-sm mb-4"
|
|
id={"code-block-#{id}"}
|
|
phx-hook="CodeBlockHook"
|
|
data-code={@code}
|
|
data-language={@language}
|
|
data-highlighted-lines={Jason.encode!(@highlighted_lines)}
|
|
><code class="text-sm"><%= @code %></code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-ctp-mantle px-4 py-2 border-t border-ctp-surface0 flex justify-end">
|
|
<.copy_button id="code-copy-btn" content={"code-block-#{id}"} />
|
|
</div>
|
|
</div>
|
|
"""
|
|
end
|
|
end
|