When I asked the AI to make this blog’s styling convention, I also asked for a script which would let me create the divs more easily. It looks for $$ or %% at the beginning of paragraphs, and then wraps everything up to the next symbol in an input ($$) or output (%%) div respectively. Since in ordinary circumstances, neither I nor ChatGPT ever have reason to begin paragraphs this way, this is a fine shorthand. The script assumes you want to write no normal text after the input/output part, which is fine enough to do manually after you copy the divs.
Basically, I copy ChatGPT’s content into StackEdit to get it into Markdown. Then I add the $$ and %% symbols to my part and to its part, and copy from there into the LambdaTest’s Markdown to HTML converter site. (I used to use the original Markdown Dingus, but it was not as good.) From there, I copy it into the “content” div in the following locally-saved webpage. Then, I use Inspect Element to get the content wrapped in the divs.
There are probably quicker ways to do it, but I wanted something that was flexible and could work on an old Windows 7 machine if I had to use one, as I had to at the time, due to issues with my own computer.
Anyway, here’s the local HTML page. The title was given by ChatGPT and I haven’t bothered to change it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Outputs Blog</title>
<style>
/* Add your CSS styles here */
</style>
</head>
<body>
<div id="content">
<p>$$This is an input paragraph.</p>
<p>This is still part of the input.</p>
<p>%%This is an output paragraph.</p>
<p>This is still part of the output.</p>
</div>
<script src="script.js"></script>
</body>
</html>
And here’s the latest version of script.js. It was made by GPT-4, but not on the first try; I had to ask it for bug fixes a few times.
document.addEventListener("DOMContentLoaded", function () {
const content = document.getElementById("content");
const nodes = content.childNodes;
let newContent = "";
let currentType = "";
nodes.forEach((node, index) => {
if (node.nodeType !== Node.TEXT_NODE) {
const inputPrefix = node.textContent.indexOf("$$");
const outputPrefix = node.textContent.indexOf("%%");
if (inputPrefix === 0 || outputPrefix === 0) {
if (currentType) {
newContent += `</div>`;
}
currentType = inputPrefix === 0 ? "input" : "output";
newContent += `<div class="${currentType}">`;
// Remove the $$ or %% from the first child of the node
const firstChild = node.firstChild;
firstChild.textContent = firstChild.textContent.slice(2);
}
if /*New code added for code-block divs begins here*/(node.nodeName === "PRE") { // Check if the node is a <pre> element
newContent += `<div class="code-block">${node.outerHTML}</div>`;
} else if /*New code added for code-block divs ends here*/(node.outerHTML) {
newContent += node.outerHTML;
} else {
newContent += `<p>${node.textContent}</p>`;
}
// Close the current div when the next symbol is found or the last node is reached
if (
(index + 1 < nodes.length && (nodes[index + 1].textContent.startsWith("$$") || nodes[index + 1].textContent.startsWith("%%"))) ||
index === nodes.length - 1
) {
newContent += `</div>`;
currentType = "";
}
}
});
content.innerHTML = newContent;
});
Since the first version, I have also asked the AI to help me make code blocks with scrollbars. Basically we make a code-block div with this CSS:
.code-block {
position: relative;
width: 100%;
max-width: 600px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin-bottom: 20px;
overflow-x: auto;
background-color: #f5f5f5;
font-family: monospace;
}
No comments:
Post a Comment