tag-browser: use separate <code-block> module for style preview

html_resources/code-block/code-block.css

@@ -0,0 +1,122 @@
+:host{
+  font-family: monospace;
+  white-space: pre-wrap;
+  display: block;
+}
+:host(.inline){
+  display: inline-block;
+}
+:host(.nowrap){
+  white-space: pre;
+  overflow-x: auto;
+}
+:host([data-name]){
+  --copy-button-top: 1.5em;
+}
+:host(.inline.copy-able){
+  --copy-button-block-padding: 0;
+  --codeblock-inline-padding: 40px;
+}
+caption{
+  text-align: start;
+  padding-inline-start: 3em;
+}
+caption:empty{
+  display: none;
+}
+.outerBox{
+  position: relative;
+}
+table{
+  border: 1px solid;
+  border-collapse: collapse;
+  border-spacing: 0px;
+  width: 100%;
+  margin-inline-end: var(--codeblock-inline-padding,0);
+}
+tbody{
+  counter-reset: nlines 0;
+  color: lightblue;
+  background-color: rgb(40,37,43);
+}
+@keyframes hide-show{
+  0%{ opacity: 0 }
+  10%{ opacity: 1 }
+  90%{ opacity: 1 }
+  100%{ opacity: 0 }
+}
+.copy-button::before{
+  content: "Copy"
+}
+.copy-button.copy-success::before{
+  white-space:nowrap;
+  content: "Copied";
+  pointer-events: none;
+  animation: hide-show 2s linear forwards;
+}
+.copy-button{
+  padding: var(--copy-button-block-padding,0.3em) 0.3em;
+  opacity: 0.5;
+  color: silver;
+  border: 1px solid rgba(230,230,230,0.3);
+  position: absolute;
+  margin-top: var(--copy-button-top);
+  right: .3em;
+  cursor: pointer
+}
+.copy-button.copy-success,
+.copy-button:hover{
+  background-color: dodgerblue;
+  color: black;
+  opacity: 1;
+}
+
+.line-number{
+  border-inline-end: 1px solid;
+  background-color: rgba(0,0,0,0.1);
+  color: silver;
+  vertical-align: top;
+  width: 0;
+  text-align: end;
+  user-select: none;
+}
+
+@media screen and (prefers-color-scheme: dark){
+  tbody{
+    /* We're cool and assume dark mode by default */
+  }
+}
+tr{
+  counter-increment: nlines;
+}
+td,tr{
+  border-block: none;
+}
+td{
+  padding: 1px 0.7em;
+}
+.line-number::before{
+  content: counter(nlines)
+}
+a{
+  color: dodgerblue;
+}
+a:visited{
+  color: orchid
+}
+tbody > div{ display: contents }
+/* These should really be moved into separate highlighter css */
+.comment{ color: rgb(50,180,90) }
+.selector{ color: lavenderblush }
+.pseudo{ color: rgb(200,180,250) }
+.id{ color: rgb(240, 148, 138) }
+.class{ color: aquamarine }
+.attribute{ color: rgb(100,200,250) }  
+.atrule{ color: lime }
+.atvalue{ color: lightblue }
+.property{ color: palegoldenrod }
+.value{ color: skyblue }
+.curly{ color: chocolate }
+.function{ color: silver }
+.important-tag{ color: orange }
+.quote{ color: burlywood }