Is there a way to style HTML by entering CSS code into the Codemirror editor? For instance, if we have the HTML code <head> </head>, how can I apply the CSS code, head{ color : red }, typed in the Codemirror editor to stylize this HTML code?
mounted(){
this.htmlCode = CodeMirror.fromTextArea(document.getElementById('editor'),{
lineNumbers: true,
theme: 'dracula',
mode: 'xml',
autoCloseTags: true,
})
this.cssCode = CodeMirror.fromTextArea(document.getElementById('editor2'),{
lineNumbers: true,
theme: 'dracula',
mode: 'css',
autoCloseTags: true,
})
};
methods : {
clickRun(){
let htmlCode = this.htmlCode.getValue()
let cssCode = this.cssCode.getValue()
let previewWindow = document.getElementById('preview').contentWindow.document
let cssAdd = previewWindow.head.append("<style type='text/css'>" + cssCode + "</style>")
previewWindow.open();
previewWindow.write(htmlCode + cssAdd);
previewWindow.close();
},
}
I tried console logging this code:
console.log(previewWindow.head)
///<head>
/// "<style type='text/css'>h1{color:red;} </style>"
///</head>
console.log(cssCode)
/// h1 {
/// color:red;
/// }
console.log(cssAdd)
/// undefined