doc-fui-ds
Version:
Doc
161 lines (145 loc) • 5.11 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic HTML Code with Template</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<!-- Add Highlight.js CSS for the "Atom One Dark" theme -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
<style>
body {
background-color: #1e1e1e;
color: #ccc;
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 20px;
}
h1, h2 {
color: #f1f1f1;
font-weight: bold;
margin-bottom: 10px;
}
pre {
position: relative;
background-color: #2d2d2d;
padding: 15px 20px;
border-radius: 10px;
overflow-x: auto;
margin: 10px 0;
white-space: pre-wrap; /* Wrap long lines */
word-wrap: break-word; /* Break long words */
font-size: 16px;
font-family: 'Courier New', Courier, monospace;
text-align: left; /* Align text to the left */
line-height: 1.4;
}
code {
font-family: 'Courier New', Courier, monospace;
white-space: pre-wrap; /* Ensure no extra spaces around the code */
}
section {
margin-bottom: 30px;
}
.copy-btn {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 10px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 18px;
display: flex;
align-items: center;
}
.copy-btn i {
margin-right: 5px;
}
.copy-btn:hover {
background-color: #0056b3;
}
.copied {
background-color: #28a745;
color: white;
}
</style>
</head>
<body>
<h1>Dynamic HTML Code Display</h1>
<section>
<h2>Example 1</h2>
<pre><code id="example-1" class="html"></code><button class="copy-btn" onclick="copyCode('example-1', this)"><i class="fas fa-copy"></i>Copy Code</button></pre>
<template id="html-example-1">
<div>
<p>This is a dynamic paragraph inside a div.</p>
</div>
</template>
</section>
<section>
<h2>Example 2</h2>
<pre><code id="example-2" class="html"></code><button class="copy-btn" onclick="copyCode('example-2', this)"><i class="fas fa-copy"></i>Copy Code</button></pre>
<template id="html-example-2">
<ul>
<li>Dynamic Item 1</li>
<li>Dynamic Item 2</li>
</ul>
</template>
</section>
<section>
<h2>Example 3</h2>
<pre><code id="example-3" class="html"></code><button class="copy-btn" onclick="copyCode('example-3', this)"><i class="fas fa-copy"></i>Copy Code</button></pre>
<template id="html-example-3">
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Subscribe</button>
</form>
</template>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>
// Function to remove the leading space from the first line and trim content
function cleanCode(code) {
const lines = code.split('\n');
lines[0] = lines[0].trim(); // Remove leading space from the first line
return lines.join('\n').trim();
}
// Dynamically populate the code blocks
const examples = ["example-1", "example-2", "example-3"];
examples.forEach(example => {
const template = document.getElementById(`html-${example}`);
let code = template.innerHTML.trim();
// Clean up the code content before inserting
code = cleanCode(code);
// Populate the code block with cleaned code
const codeElement = document.getElementById(example);
codeElement.textContent = code;
// Highlight the code using highlight.js
hljs.highlightElement(codeElement);
});
// Function to copy code to clipboard and update the button text and icon
function copyCode(exampleId, btn) {
const codeElement = document.getElementById(exampleId);
const code = codeElement.textContent;
const textarea = document.createElement('textarea');
textarea.value = code;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
// Change text and icon to "Copied"
btn.innerHTML = '<i class="fas fa-check"></i>Copied';
// Apply the 'copied' class for green background
btn.classList.add('copied');
// Optionally reset the button text and icon after a few seconds
setTimeout(() => {
btn.innerHTML = '<i class="fas fa-copy"></i>Copy Code';
btn.classList.remove('copied');
}, 2000); // Reset after 2 seconds
}
</script>
</body>
</html>