Demo MiniCodePen
Prompt
Code for a convenient web interface, (written in a single HTML file), that will allow me to paste markdown code into MD file and preview it like it would be on github (similar to CodePen - but for md).
Highlights:
More user experience, less multiple tools.
The important part is making sure the file just interprets and runs perfectly - not for editing or live viewing, although it's worth including that.
Response Model: gemini-2.5-pro
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Runner</title>
<style>
body {
font-family: sans-serif;
margin: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
.editor-container {
display: flex;
flex: 1;
overflow: hidden;
}
.editor {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
border-right: 1px solid #ccc;
}
.editor h2 {
margin: 0;
padding: 10px;
background-color: #f0f0f0;
border-bottom: 1px solid #ccc;
}
.editor-instance {
flex: 1;
border: none;
outline: none;
font-size: 14px;
}
.preview-container {
flex: 1;
display: flex;
flex-direction: column;
}
.preview-container h2 {
margin: 0;
padding: 10px;
background-color: #f0f0f0;
border-bottom: 1px solid #ccc;
}
#preview {
flex: 1;
border: none;
}
.controls {
padding: 10px;
background-color: #f0f0f0;
border-top: 1px solid #ccc;
display: flex;
gap: 10px;
}
button {
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
background-color: #fff;
}
button:hover {
background-color: #eee;
}
</style>
</head>
<body>
<div class="editor-container">
<div class="editor">
<h2>HTML</h2>
<div id="html-editor" class="editor-instance"></div>
</div>
<div class="editor">
<h2>CSS</h2>
<div id="css-editor" class="editor-instance"></div>
</div>
<div class="editor">
<h2>JavaScript</h2>
<div id="js-editor" class="editor-instance"></div>
</div>
</div>
<div class="preview-container">
<h2>Preview</h2>
<iframe id="preview"></iframe>
</div>
<div class="controls">
<button id="run-btn">Run</button>
<button id="download-btn">Download</button>
<button id="copy-btn">Copy to Clipboard</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
<script>
// Initialize Ace Editors
const htmlEditor = ace.edit("html-editor");
htmlEditor.setTheme("ace/theme/monokai");
htmlEditor.session.setMode("ace/mode/html");
const cssEditor = ace.edit("css-editor");
cssEditor.setTheme("ace/theme/monokai");
cssEditor.session.setMode("ace/mode/css");
const jsEditor = ace.edit("js-editor");
jsEditor.setTheme("ace/theme/monokai");
jsEditor.session.setMode("ace/mode/javascript");
const preview = document.getElementById('preview');
const runBtn = document.getElementById('run-btn');
const downloadBtn = document.getElementById('download-btn');
const copyBtn = document.getElementById('copy-btn');
function runCode() {
const htmlCode = htmlEditor.getValue();
const cssCode = cssEditor.getValue();
const jsCode = jsEditor.getValue();
const combinedCode = `
<html>
<head>
<style>${cssCode}</style>
</head>
<body>
${htmlCode}
<script>${jsCode}<\/script>
</body>
</html>
`;
preview.srcdoc = combinedCode;
}
function downloadCode() {
const htmlCode = htmlEditor.getValue();
const cssCode = cssEditor.getValue();
const jsCode = jsEditor.getValue();
const combinedCode = `
<html>
<head>
<style>${cssCode}</style>
</head>
<body>
${htmlCode}
<script>${jsCode}<\/script>
</body>
</html>
`;
const blob = new Blob([combinedCode], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'index.html';
a.click();
URL.revokeObjectURL(url);
}
function copyCode() {
const htmlCode = htmlEditor.getValue();
const cssCode = cssEditor.getValue();
const jsCode = jsEditor.getValue();
const combinedCode = `
<html>
<head>
<style>${cssCode}</style>
</head>
<body>
${htmlCode}
<script>${jsCode}<\/script>
</body>
</html>
`;
navigator.clipboard.writeText(combinedCode).then(() => {
alert('Code copied to clipboard!');
}, () => {
alert('Failed to copy code.');
});
}
runBtn.addEventListener('click', runCode);
downloadBtn.addEventListener('click', downloadCode);
copyBtn.addEventListener('click', copyCode);
// Initial run with empty code
runCode();
</script>
</body>
</html>