HTML source viewer

dabblet.css

/*	HTML source viewer	*/
body { margin: 3em;}

           ::before { content: open-quote                                       '>'; }
       [id]::before { content: open-quote ' id="'attr(id)                      '">'; }
    [class]::before { content: open-quote                 ' class="'attr(class)'">'; }
[id][class]::before { content: open-quote ' id="'attr(id)'" class="'attr(class)'">'; }
           ::after  { content: close-quote                                         ; }
html::before, html::after,
body::before, body::after  {
                      content: none;
}

::before, ::after {
	display: inline-block;
	font: 0px/0 monospace;
	color: purple;
	transform: scale(0, 0);
	transition: all .5s;
}
::before{margin-left:-3em;margin-top:-0.3em;float:left;}
::after {margin-left:0em;margin-top:0em;}
*:hover::before,
*:hover::after {
	font-size: inherit;
	transform: scale(1, 1);
}

html       { quotes: "<html"       "</html>"      ; }
head       { quotes: "<head"       "</head>"      ; }
title      { quotes: "<title"      "</title>"     ; }
base       { quotes: "<base"       "</base>"      ; }
link       { quotes: "<link"       ""             ; }
meta       { quotes: "<meta"       ""             ; }
style      { quotes: "<style"      "</style>"     ; }
script     { quotes: "<script"     "</script>"    ; }
noscript   { quotes: "<noscript"   "</noscript>"  ; }
body       { quotes: "<body"       "</body>"      ; }
section    { quotes: "<section"    "</section>"   ; }
nav        { quotes: "<nav"        "</nav>"       ; }
article    { quotes: "<article"    "</article>"   ; }
aside      { quotes: "<aside"      "</aside>"     ; }
h1         { quotes: "<h1"         "</h1>"        ; }
h2         { quotes: "<h2"         "</h2>"        ; }
h3         { quotes: "<h3"         "</h3>"        ; }
h4         { quotes: "<h4"         "</h4>"        ; }
h5         { quotes: "<h5"         "</h5>"        ; }
h6         { quotes: "<h6"         "</h6>"        ; }
header     { quotes: "<header"     "</header>"    ; }
footer     { quotes: "<footer"     "</footer>"    ; }
address    { quotes: "<address"    "</address>"   ; }
main       { quotes: "<main"       "</main>"      ; }
p          { quotes: "<p"          "</p>"         ; }
hr         { quotes: "<hr"         ""             ; }
pre        { quotes: "<pre"        "</pre>"       ; }
blockquote { quotes: "<blockquote" "</blockquote>"; }
ol         { quotes: "<ol"         "</ol>"        ; }
ul         { quotes: "<ul"         "</ul>"        ; }
li         { quotes: "<li"         "</li>"        ; }
dl         { quotes: "<dl"         "</dl>"        ; }
dt         { quotes: "<dt"         "</dt>"        ; }
dd         { quotes: "<dd"         "</dd>"        ; }
figure     { quotes: "<figure"     "</figure>"    ; }
figcaption { quotes: "<figcaption" "</figcaption>"; }
div        { quotes: "<div"        "</div>"       ; }
a          { quotes: "<a"          "</a>"         ; }
em         { quotes: "<em"         "</em>"        ; }
strong     { quotes: "<strong"     "</strong>"    ; }
small      { quotes: "<small"      "</small>"     ; }
s          { quotes: "<s"          "</s>"         ; }
cite       { quotes: "<cite"       "</cite>"      ; }
q          { quotes: "<q"          "</q>"         ; }
dfn        { quotes: "<dfn"        "</dfn>"       ; }
abbr       { quotes: "<abbr"       "</abbr>"      ; }
data       { quotes: "<data"       "</data>"      ; }
time       { quotes: "<time"       "</time>"      ; }
code       { quotes: "<code"       "</code>"      ; }
var        { quotes: "<var"        "</var>"       ; }
samp       { quotes: "<samp"       "</samp>"      ; }
kbd        { quotes: "<kbd"        "</kbd>"       ; }
sub        { quotes: "<sub"        "</sub>"       ; }
sup        { quotes: "<sup"        "</sup>"       ; }
i          { quotes: "<i"          "</i>"         ; }
b          { quotes: "<b"          "</b>"         ; }
u          { quotes: "<u"          "</u>"         ; }
mark       { quotes: "<mark"       "</mark>"      ; }
ruby       { quotes: "<ruby"       "</ruby>"      ; }
rt         { quotes: "<rt"         "</rt>"        ; }
rp         { quotes: "<rp"         "</rp>"        ; }
bdi        { quotes: "<bdi"        "</bdi>"       ; }
bdo        { quotes: "<bdo"        "</bdo>"       ; }
span       { quotes: "<span"       "</span>"      ; }
br         { quotes: "<br"         ""             ; }
wbr        { quotes: "<wbr"        ""             ; }
ins        { quotes: "<ins"        "</ins>"       ; }
del        { quotes: "<del"        "</del>"       ; }
img        { quotes: "<img"        ""             ; }
iframe     { quotes: "<iframe"     "</iframe>"    ; }
embed      { quotes: "<embed"      "</embed>"     ; }
object     { quotes: "<object"     "</object>"    ; }
param      { quotes: "<param"      ""             ; }
video      { quotes: "<video"      "</video>"     ; }
audio      { quotes: "<audio"      "</audio>"     ; }
source     { quotes: "<source"     ""             ; }
track      { quotes: "<track"      ""             ; }
canvas     { quotes: "<canvas"     "</canvas>"    ; }
map        { quotes: "<map"        "</map>"       ; }
area       { quotes: "<area"       "</area>"      ; }
svg        { quotes: "<svg"        "</svg>"       ; }
math       { quotes: "<math"       "</math>"      ; }
table      { quotes: "<table"      "</table>"     ; }
caption    { quotes: "<caption"    "</caption>"   ; }
colgroup   { quotes: "<colgroup"   "</colgroup>"  ; }
col        { quotes: "<col"        "</col>"       ; }
tbody      { quotes: "<tbody"      "</tbody>"     ; }
thead      { quotes: "<thead"      "</thead>"     ; }
tfoot      { quotes: "<tfoot"      "</tfoot>"     ; }
tr         { quotes: "<tr"         "</tr>"        ; }
td         { quotes: "<td"         "</td>"        ; }
th         { quotes: "<th"         "</th>"        ; }
form       { quotes: "<form"       "</form>"      ; }
fieldset   { quotes: "<fieldset"   "</fieldset>"  ; }
legend     { quotes: "<legend"     "</legend>"    ; }
label      { quotes: "<label"      "</label>"     ; }
input      { quotes: "<input"      ""             ; }
button     { quotes: "<button"     "</button>"    ; }
select     { quotes: "<select"     "</select>"    ; }
datalist   { quotes: "<datalist"   "</datalist>"  ; }
optgroup   { quotes: "<optgroup"   "</optgroup>"  ; }
option     { quotes: "<option"     "</option>"    ; }
textarea   { quotes: "<textarea"   "</textarea>"  ; }
keygen     { quotes: "<keygen"     "</keygen>"    ; }
output     { quotes: "<output"     "</output>"    ; }
progress   { quotes: "<progress"   "</progress>"  ; }
meter      { quotes: "<meter"      "</meter>"     ; }
details    { quotes: "<details"    "</details>"   ; }
summary    { quotes: "<summary"    "</summary>"   ; }
menuitem   { quotes: "<menuitem"   "</menuitem>"  ; }
menu       { quotes: "<menu"       "</menu>"      ; }

dabblet.html

<section id="foo" class="bar">You can view the HTML source on hover
   <pre>Is this a pre element, or just a custom div?</pre>
   <var>Same goes for this one.</var>
</section>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}