mainwp/mainwp.dev
1
0
Fork 0
mirror of https://gh.llkk.cc/https://github.com/mainwp/mainwp.dev.git synced 2025-10-03 15:34:35 +08:00
Code Issues Projects Packages Wiki Activity Actions
mainwp.dev/test-code.html

419 lines
14 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MainWP.dev Code Block Test</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Add Prism.js and plugins -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet" />
<link id="prism-theme" href="dox-theme/assets/css/prism-themes/prism-mainwp-dark.css" rel="stylesheet" />
<style>
:root {
/* Base colors */
--color-primary: #7fb100;
--color-secondary: #446200;
--color-accent: #4682b4;
--color-text: #1c1d1b;
--color-text-muted: #666;
--color-background: #f2f3f2;
--color-border: #e2e3e2;
--color-code-background: #f8f9f8;
--color-code-header-bg: #f5f6f5;
--color-link: var(--color-accent);
--color-link-hover: #446200;
--color-primary-transparent: rgba(127, 177, 0, 0.1);
/* Layout */
--dox-border-radius: 4px;
--font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}
/* Dark mode colors */
.dark-mode {
--color-text: #f2f3f2;
--color-text-muted: #aaa;
--color-background: #1c1d1b;
--color-border: #2d2e2c;
--color-code-background: #2a2b29;
--color-code-header-bg: #252624;
--color-link: #7fb100;
--color-link-hover: #9fd320;
--color-primary-transparent: rgba(127, 177, 0, 0.2);
}
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
line-height: 1.6;
color: var(--color-text);
background-color: var(--color-background);
padding: 2rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Container */
.container {
max-width: 800px;
margin: 0 auto;
}
/* Theme toggle */
.theme-toggle {
position: fixed;
top: 1rem;
right: 1rem;
padding: 0.5rem 1rem;
background: var(--color-code-header-bg);
border: 1px solid var(--color-border);
border-radius: var(--dox-border-radius);
color: var(--color-text);
cursor: pointer;
transition: all 0.2s ease;
}
.theme-toggle:hover {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
/* Code block styles */
.code-block {
position: relative;
margin: 1.5rem 0;
border-radius: var(--dox-border-radius);
overflow: hidden;
background-color: var(--color-code-background);
border: 1px solid var(--color-border);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: box-shadow 0.2s ease;
}
.code-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 1rem;
background-color: var(--color-code-header-bg);
border-bottom: 1px solid var(--color-border);
font-size: 0.875rem;
}
.language-label {
font-family: var(--font-family-code);
color: var(--color-text-muted);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.copy-button {
background: transparent;
border: 1px solid var(--color-border);
border-radius: 3px;
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
cursor: pointer;
color: var(--color-text-muted);
transition: all 0.2s ease;
}
.copy-button:hover {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: white;
}
.copy-button.copied {
background-color: var(--color-secondary);
border-color: var(--color-secondary);
color: white;
}
pre[class*="language-"] {
margin: 0;
padding: 0;
overflow: auto;
background-color: var(--color-code-background);
font-family: var(--font-family-code);
font-size: 0.9rem;
line-height: 1.5;
tab-size: 2;
-webkit-overflow-scrolling: touch;
position: relative;
display: grid;
grid-template-columns: 3rem 1fr;
}
pre[class*="language-"].line-numbers {
padding-left: 0;
}
code[class*="language-"] {
font-family: inherit;
font-size: inherit;
line-height: inherit;
tab-size: inherit;
background: none;
padding: 1rem;
margin: 0;
border-radius: 0;
grid-column: 2;
min-width: 0;
overflow-x: auto;
}
.line-numbers .line-numbers-rows {
grid-column: 1;
border-right: 1px solid var(--color-border);
background-color: var(--color-code-background);
padding: 1rem 0;
user-select: none;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
gap: 0;
line-height: 1.5;
}
.line-numbers-rows > span {
display: block;
counter-increment: linenumber;
padding: 0 0.8rem;
color: var(--color-text-muted);
height: 1.5em;
width: 100%;
text-align: right;
}
.line-numbers-rows > span:before {
content: counter(linenumber);
}
.line-highlight {
background: var(--color-primary-transparent);
}
.dark-mode .code-block {
background-color: var(--color-code-background);
border-color: rgba(255, 255, 255, 0.15);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.dark-mode .code-header {
background-color: rgba(0, 0, 0, 0.2);
border-color: var(--color-border);
}
.dark-mode .copy-button {
border-color: rgba(255, 255, 255, 0.1);
}
.dark-mode .copy-button:hover {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
@media (min-width: 769px) {
.code-block:hover {
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}
.dark-mode .code-block:hover {
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}
pre[class*="language-"]::-webkit-scrollbar {
height: 8px;
background-color: transparent;
}
pre[class*="language-"]::-webkit-scrollbar-thumb {
background-color: var(--color-border);
border-radius: 4px;
}
pre[class*="language-"]::-webkit-scrollbar-thumb:hover {
background-color: var(--color-text-muted);
}
}
@media (max-width: 768px) {
.code-block {
margin: 1rem 0;
border-radius: 3px;
}
pre[class*="language-"] {
font-size: 0.85rem;
grid-template-columns: 2.5rem 1fr;
}
code[class*="language-"] {
padding: 0.75rem;
}
.line-numbers .line-numbers-rows {
padding: 0.75rem 0;
font-size: 0.85rem;
}
.line-numbers-rows > span {
padding: 0 0.5rem;
}
.code-header {
padding: 0.375rem 0.75rem;
}
}
</style>
</head>
<body>
<button class="theme-toggle" onclick="toggleTheme()">Toggle Theme</button>
<div class="container">
<h1>MainWP.dev Code Block Examples</h1>
<p>This page demonstrates various code block styles and functionality.</p>
<h2>PHP Example</h2>
<div class="code-block">
<div class="code-header">
<span class="language-label">PHP</span>
<button class="copy-button">Copy</button>
</div>
<pre class="line-numbers"><code class="language-php">namespace MainWP\Dashboard;
class MainWP_Extensions_Handler {
public function __construct() {
add_action('admin_init', [$this, 'admin_init']);
}
public function admin_init() {
// Initialize extensions
$this->load_extensions();
}
private function load_extensions() {
// Load installed extensions
$extensions = get_option('mainwp_extensions', []);
foreach ($extensions as $extension) {
if ($this->is_extension_active($extension)) {
$this->activate_extension($extension);
}
}
}
}</code></pre>
</div>
<h2>JavaScript Example</h2>
<div class="code-block">
<div class="code-header">
<span class="language-label">JavaScript</span>
<button class="copy-button">Copy</button>
</div>
<pre class="line-numbers"><code class="language-javascript">document.addEventListener('DOMContentLoaded', function() {
const copyButtons = document.querySelectorAll('.copy-button');
copyButtons.forEach(button => {
button.addEventListener('click', function() {
const codeBlock = this.closest('.code-block');
const code = codeBlock.querySelector('code').innerText;
navigator.clipboard.writeText(code).then(() => {
button.textContent = 'Copied!';
button.classList.add('copied');
setTimeout(() => {
button.textContent = 'Copy';
button.classList.remove('copied');
}, 2000);
});
});
});
});</code></pre>
</div>
<h2>HTML Example</h2>
<div class="code-block">
<div class="code-header">
<span class="language-label">HTML</span>
<button class="copy-button">Copy</button>
</div>
<pre class="line-numbers"><code class="language-html">&lt;div class="mainwp-extension-card"&gt;
&lt;div class="extension-header"&gt;
&lt;h3 class="extension-title"&gt;MainWP Custom Dashboard&lt;/h3&gt;
&lt;span class="extension-version"&gt;v4.1.2&lt;/span&gt;
&lt;/div&gt;
&lt;div class="extension-content"&gt;
&lt;p class="extension-description"&gt;
Customize your MainWP Dashboard exactly the way you want it.
&lt;/p&gt;
&lt;div class="extension-actions"&gt;
&lt;button class="activate-btn"&gt;Activate&lt;/button&gt;
&lt;a href="#" class="learn-more"&gt;Learn More&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
<!-- Add Prism.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
<script>
// Theme Toggle functionality
function toggleTheme() {
const isDark = document.documentElement.classList.toggle('dark-mode');
const theme = isDark ? 'dark' : 'light';
localStorage.setItem('theme', theme);
// Switch Prism theme
const prismTheme = document.getElementById('prism-theme');
prismTheme.href = `dox-theme/assets/css/prism-themes/prism-mainwp-${theme}.css`;
}
// Initialize theme and Prism
document.addEventListener('DOMContentLoaded', function() {
const savedTheme = localStorage.getItem('theme') || 'dark';
if (savedTheme === 'dark') {
document.documentElement.classList.add('dark-mode');
}
// Set initial Prism theme
const prismTheme = document.getElementById('prism-theme');
prismTheme.href = `dox-theme/assets/css/prism-themes/prism-mainwp-${savedTheme}.css`;
// Initialize copy buttons
const copyButtons = document.querySelectorAll('.copy-button');
copyButtons.forEach(button => {
button.addEventListener('click', function() {
const codeBlock = this.closest('.code-block');
const code = codeBlock.querySelector('code').innerText;
navigator.clipboard.writeText(code).then(() => {
button.textContent = 'Copied!';
button.classList.add('copied');
setTimeout(() => {
button.textContent = 'Copy';
button.classList.remove('copied');
}, 2000);
});
});
});
});
</script>
</body>
</html>
Reference in a new issue View git blame Copy permalink