You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
2.1 KiB
JavaScript
74 lines
2.1 KiB
JavaScript
Array.from(document.querySelectorAll("pre code"))
|
|
.forEach(function(element){
|
|
console.log(element.clientHeight )
|
|
let code = element.innerHTML;
|
|
let n = document.createElement('div');
|
|
n.className = 'code';
|
|
n.innerHTML = code;
|
|
n.setAttribute("height", "200px");
|
|
let par = element.parentNode;
|
|
par.outerHTML = n.outerHTML;
|
|
})
|
|
|
|
Array.from(document.querySelectorAll(".code"))
|
|
.forEach(function(element){
|
|
let html = element.innerHTML;
|
|
element.innerHTML = '';
|
|
let n = document.createElement('iframe');
|
|
n.setAttribute("style", "width: 100%; height: 200px; border: 0;")
|
|
n.frameBorder = 0;
|
|
element.appendChild(n);
|
|
var iframeDocument = n.contentDocument;
|
|
// Set the content of the iframe
|
|
iframeDocument.open();
|
|
iframeDocument.write(`
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Embedded Page with JavaScript</title>
|
|
<style>
|
|
#editor {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="editor">${html}</div>
|
|
</body>
|
|
</html>
|
|
`);
|
|
iframeDocument.close();
|
|
function sc(link){
|
|
let n = document.createElement('script');
|
|
n.async = true;
|
|
n.src = link;
|
|
return n
|
|
}
|
|
function sch(link){
|
|
let n = document.createElement('script');
|
|
n.async = true;
|
|
n.innerHTML = link;
|
|
return n
|
|
}
|
|
iframeDocument.body.appendChild(sc('https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.2/ace.js'))
|
|
iframeDocument.body.appendChild(sch(`
|
|
(function clbk(){
|
|
if(typeof ace != 'undefined'){
|
|
var editor = ace.edit("editor");
|
|
editor.setTheme("ace/theme/ambiance");
|
|
editor.getSession().setMode("ace/mode/mysql");
|
|
editor.setReadOnly(true);
|
|
}else{
|
|
setTimeout(function(){
|
|
clbk();
|
|
},100)
|
|
}
|
|
})();
|
|
`))
|
|
}) |