Example Code Web Component
A simple component for displaying code examples
Example Inception
<img src="proxy.php?url=https%3A%2F%2Fpicsum.photos%2Fseed%2F1%2F200%2F200" class="example" onClick="changeBorder()" />
var changeBorder = function() { const img = document.querySelector('img.example'); if (img.classList.contains('border-on')) { img.classList.remove('border-on'); } else { img.classList.add('border-on'); } };
img.example.border-on { border: 2px solid green; border-radius: 20px; }
<example-code> <div slot="example"> <img src="proxy.php?url=https%3A%2F%2Fpicsum.photos%2Fseed%2F1%2F200%2F200" class="example" onClick="changeBorder()" /> </div> <pretty-code language="html" slot="html"> <img src="proxy.php?url=https%3A%2F%2Fpicsum.photos%2Fseed%2F1%2F200%2F200" class="example" onClick="changeBorder()" /> </pretty-code> <pretty-code language="js" slot="javascript"> var changeBorder = function() { const img = document.querySelector('img.example'); if (img.classList.contains('border-on')) { img.classList.remove('border-on'); } else { img.classList.add('border-on'); } }; </pretty-code> <pretty-code language="css" slot="css"> img.example.border-on { border: 2px solid green; border-radius: 20px; } </pretty-code> </example-code>