JSFiddle - React, Tailwind, and code Playground

Custom Inline Elements for code editor example.

by nilloc

HTML

<modkit-code>
  <statement class="when">
    <id>when</id>
    <arguments>(<argument>START</argument>)</arguments>
    <compound-statement>{<br>
    <tab></tab><statement class="output"><id>someMethod</id><arguments>()</arguments>;</statement><br>
    <tab></tab><statement class="output"><id>someOtherMethod</id><arguments>()</arguments>;</statement><br>
    }</compound-statement>
  </statement>
  <statement class="output"><id>someTestMethod</id><arguments>()</arguments>;</statement><br>
</modkit-code>

SCSS

*{box-sizing:border-box;}
modkit-code{
  position:absolute;
  top:10px;
  left:10px;
}
statement{
  color:white;
  font-family:monospace;
  font-weight:bold;
  font-size:16px;
  positon:relative;
  
  &:hover{
    border:2px solid black;
    padding:8px;
  }
  
  statement{
    left:10px;
    padding:6px;
  }
}
argument{
  background-color:white;
  color:black;
  padding:6px;
  border-radius:2px;
}
compound-statement{
  line-height:37px;
}
tab{
  padding:10px;
  background:transparent;
}
.when{
  background-color:orange;
  padding:10px;
}
.output{
  background-color:royalblue;
  padding:10px;
}

JavaScript

//var statements = document.getElementsByClassName('someClass');

console.log("statements:", document.querySelectorAll('statement'));

var statements = document.querySelectorAll('statement');
statements.forEach(function(statement){
	console.log(statement);

});