Code display components for inline code and code blocks.
Inline Code
Use the
mix phx.server
command to start the Phoenix server.
You can also run
mix test
to execute the test suite.
Code Block
elixir
defmodule MyApp.Greeting do
def hello(name) do
"Hello, #{name}!"
end
endCode Block with Header
app.js
import { Socket } from "phoenix"
import { LiveSocket } from "phoenix_live_view"
const csrfToken = document
.querySelector("meta[name='csrf-token']")
.getAttribute("content")
const liveSocket = new LiveSocket("/live", Socket, {
params: { _csrf_token: csrfToken }
})
liveSocket.connect()HTML Example
html
<div class="pa-card">
<div class="pa-card__header">
<h3>Card Title</h3>
</div>
<div class="pa-card__body">
Content goes here.
</div>
</div>CSS Example
css
.pa-card {
border-radius: var(--pa-border-radius);
background: var(--pa-card-bg);
box-shadow: var(--pa-card-shadow);
}
.pa-card__header {
padding: var(--pa-card-header-padding);
border-bottom: 1px solid var(--pa-border-color);
}