Display code snippets, JSON data, configuration files, and terminal output with syntax highlighting and copy functionality.
Inline Code
Use the <code> element for inline 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">
<h3>Card Title</h3>
</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
<p>Use <code>inline code</code> for references.</p>
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>