Display code snippets, JSON data, configuration files, and terminal output with syntax highlighting and copy functionality.
Inline Code
Use the <code> element for isInline code references like npm install or const myVariable = true.
Configure the server using config.json and set port: 3000 in the configuration file.
Import components with import { Button } from 'react' syntax.
Basic Code Blocks
JavaScript
function greet(name) {
return `Hello, ${name}!`;
}
const result = greet('World');
console.log(result);JSON
{
"name": "Pure Admin",
"version": "1.0.0",
"theme": "corporate",
"features": [
"responsive",
"themeable",
"lightweight"
]
}HTML
<div class="pa-card">
<div class="pa-card__header">
<Heading level={3}>Card Title</Heading>
</div>
<div class="pa-card__body">
Content here
</div>
</div>CSS
.pa-btn {
padding: 0.5rem 0.75rem;
border-radius: 0.25rem;
font-size: 0.875rem;
background-color: #3b82f6;
color: #ffffff;
}Code Blocks with Headers
server.js
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(3000);package.json
{
"name": "my-app",
"version": "1.0.0",
"scripts": {
"start": "node server.js",
"dev": "nodemon server.js"
}
}Terminal Output
Bash Commands
$ npm install
$ npm run build
$ npm start
Server running on port 3000...SQL Query
SELECT users.name, orders.total
FROM users
INNER JOIN orders
ON users.id = orders.user_id
WHERE orders.status = 'completed'
ORDER BY orders.total DESC;Compact Variant
Use .pa-code--compact for smaller code snippets.
def fibonacci(n):
if n <= 1:
return n
return fibonacci(n-1) + fibonacci(n-2)Language Accent Colors
Code blocks with language-specific colored left borders for visual identification.
JavaScript
console.log('Hello');JSON
{"key": "value"}HTML
<div>Hello</div>
CSS
.class { color: red; }Bash
$ npm install
SQL
SELECT * FROM users;
Python
print("Hello World")Usage Examples
Inline Code
<Paragraph>Use <code>inline code</code> for references.</Paragraph> Basic Code Block
<pre class="pa-code pa-code--javascript">
const greeting = 'Hello';
console.log(greeting);
</pre> Code Block with Header
<div class="pa-code-block">
<div class="pa-code-block__header">
<span class="pa-code-block__title">filename.js</span>
<button class="pa-btn pa-btn--xs">Copy</button>
</div>
<div class="pa-code-block__body">
<pre class="pa-code">// your code here</pre>
</div>
</div>