Code Anatomy
Syntax highlighting, inline and block, optional clipboard, and other languages.
Hex doc
Phoenix
Inline
conn.request_path
<p class="text-sm">
Path:
<.code inline class="code" language={:elixir} code={~S|conn.request_path|} />
</p>
Block
defmodule Greeter do def hi, do: :ok end
<.code class="code" language={:elixir} code={"""
defmodule Greeter do
def hi, do: :ok
end
"""} />
Block with clipboard
def hello(name) do
"Hello, #{name}!"
end
<div class="relative w-full">
<.clipboard
class="clipboard "
value={\"\"\"
def hello(name) do
"Hello, #{name}!"
end
\"\"\"}
input={false}
trigger_aria_label="Copy code"
>
<:copy><.heroicon name="hero-clipboard" /></:copy>
<:copied><.heroicon name="hero-check" /></:copied>
</.clipboard>
<.code class="code" language={:elixir} code={\"\"\"
def hello(name) do
"Hello, #{name}!"
end
\"\"\"} />
</div>
JavaScript
export function greet(name) {
return `Hello, ${name}!`;
}
<.code class="code" language={:js} code={"""
export function greet(name) {
return `Hello, ${name}!`;
}
"""} />
From file
defmodule Hello do
def world do
"Hello, World!"
end
end
<.code class="code" language={:elixir} code={"""
defmodule Hello do
def world do
"Hello, World!"
end
end
"""} />