<!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--><linkrel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.30/themes/prism.min.css"><scriptsrc="https://cdn.jsdelivr.net/npm/prismjs@1.30/components/prism-core.min.js" data-manual></script><!--Remove data-manual if also using Prism normally--><scriptsrc="https://cdn.jsdelivr.net/npm/prismjs@1.30/plugins/autoloader/prism-autoloader.min.js"></script><!--2. Import code-input-js--><scriptsrc="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.8/code-input.min.js"></script><linkrel="stylesheet" href="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.8/code-input.min.css"><scriptsrc="https://cdn.jsdelivr.net/gh/WebCoder49/code-input@2.8/plugins/indent.min.js"></script><!--3. Join code-input-js to highlighter--><script>codeInput.registerTemplate("syntax-highlighted",newcodeInput.templates.Prism(Prism,[newcodeInput.plugins.Indent()]));</script></head><body><!--4. Use the code-input element--><code-input><textareadata-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 consistentlyconstelem=document.querySelector("code-input");elem.setAttribute("placeholder","Type JS code");elem.setAttribute("language","JavaScript");});</script></body></html>
Steps to reproduce:
Expected Output:
Actual Output: