Skip to content

Instantly share code, notes, and snippets.

@dubiouscript
Forked from GeorgeTzellis/dabblet.css
Created July 5, 2019 14:42
Show Gist options
  • Save dubiouscript/71963523eb392aabc7255f7ef70f1a65 to your computer and use it in GitHub Desktop.
Save dubiouscript/71963523eb392aabc7255f7ef70f1a65 to your computer and use it in GitHub Desktop.
HTML source viewer
/* 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>" ; }
<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>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment