Skip to content

Instantly share code, notes, and snippets.

@willmcgugan

willmcgugan/console_embedded.html

Created May 2, 2022 16:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save willmcgugan/c95aaaa3e497e34b26a89b1f28a8025a to your computer and use it in GitHub Desktop.
Save willmcgugan/c95aaaa3e497e34b26a89b1f28a8025a to your computer and use it in GitHub Desktop.
Download ZIP
Embedded SVG
Raw
console_embedded.html
<html>
<body>
<svg class="rich-terminal" viewBox="0 0 1221.6000000000001 549" xmlns="http://www.w3.org/2000/svg">
<style>
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Regular"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Bold"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
font-style: bold;
font-weight: 700;
}
.terminal-2997888498-matrix {
font-family: Fira Code, monospace;
font-size: 20px;
font-variant: east-asian-width-values;
line-height: 31px;
}
.terminal-2997888498-title {
font-size: 14px;
opacity: 0.8;
font-weight: bold;
font-family: arial;
}
.terminal-2997888498-r1 { fill: #66d9ef }
.terminal-2997888498-r2 { fill: #f8f8f2 }
.terminal-2997888498-r3 { fill: #a6e22e }
.terminal-2997888498-r4 { fill: #f92672 }
.terminal-2997888498-r5 { fill: #b9bcba }
.terminal-2997888498-r6 { opacity: 0.6;fill: #75715e }
.terminal-2997888498-r7 { fill: #e6db74 }
.terminal-2997888498-r8 { fill: #191919 }
</style>
<rect fill="#191919" x="16" y="20" width="1189.6000000000001" height="509" rx="12"/><text class="terminal-2997888498-title" fill="#b9bcba" text-anchor="middle" x="594.0" y="40">Rich</text>
<circle cx="35" cy="36" r="6" fill="#ff5f57"/>
<circle cx="55" cy="36" r="6" fill="#febc2e"/>
<circle cx="75" cy="36" r="6" fill="#28c840"/>
<g transform="translate(28, 52)">
<rect fill="#272822" x="0.0" y="0" width="38.2" height="32"/><rect fill="#272822" x="37.2" y="0" width="13.4" height="32"/><rect fill="#272822" x="49.6" y="0" width="187.0" height="32"/><rect fill="#272822" x="235.6" y="0" width="273.8" height="32"/><rect fill="#272822" x="508.40000000000003" y="0" width="25.8" height="32"/><rect fill="#272822" x="533.2" y="0" width="397.8" height="32"/><rect fill="#272822" x="930.0" y="0" width="236.6" height="32"/><rect fill="#191919" x="1165.6000000000001" y="0" width="1.0" height="32"/><rect fill="#272822" x="0.0" y="31" width="50.6" height="32"/><rect fill="#272822" x="49.6" y="31" width="893.8000000000001" height="32"/><rect fill="#272822" x="942.4" y="31" width="224.20000000000002" height="32"/><rect fill="#191919" x="1165.6000000000001" y="31" width="1.0" height="32"/><rect fill="#272822" x="0.0" y="62" width="50.6" height="32"/><rect fill="#272822" x="49.6" y="62" width="149.8" height="32"/><rect fill="#272822" x="198.4" y="62" width="13.4" height="32"/><rect fill="#272822" x="210.8" y="62" width="162.20000000000002" height="32"/><rect fill="#272822" x="372.0" y="62" width="794.6" height="32"/><rect fill="#191919" x="1165.6000000000001" y="62" width="1.0" height="32"/><rect fill="#272822" x="0.0" y="93" width="50.6" height="32"/><rect fill="#272822" x="49.6" y="93" width="38.2" height="32"/><rect fill="#272822" x="86.8" y="93" width="13.4" height="32"/><rect fill="#272822" x="99.2" y="93" width="1067.4" height="32"/><rect fill="#191919" x="1165.6000000000001" y="93" width="1.0" height="32"/><rect fill="#272822" x="0.0" y="124" width="100.2" height="32"/><rect fill="#272822" x="99.2" y="124" width="187.0" height="32"/><rect fill="#272822" x="285.2" y="124" width="13.4" height="32"/><rect fill="#272822" x="297.6" y="124" width="224.20000000000002" height="32"/><rect fill="#272822" x="520.8000000000001" y="124" width="645.8000000000001" height="32"/><rect fill="#191919" x="1165.6000000000001" y="124" width="1.0" height="32"/><rect fill="#272822" x="0.0" y="155" width="50.6" height="32"/><rect fill="#272822" x="49.6" y="155" width="75.4" height="32"/><rect fill="#272822" x="124.0" y="155" width="13.4" height="32"/><rect fill="#272822" x="136.4" y="155" width="162.20000000000002" height="32"/><rect fill="#272822" x="297.6" y="155" width="13.4" height="32"/><rect fill="#272822" x="310.0" y="155" width="856.6" height="32"/><rect fill="#191919" x="1165.6000000000001" y="155" width="1.0" height="32"/><rect fill="#272822" x="0.0" y="186" width="100.2" height="32"/><rect fill="#272822" x="99.2" y="186" width="75.4" height="32"/><rect fill="#272822" x="173.6" y="186" width="993.0" height="32"/><rect fill="#191919" x="1165.6000000000001" y="186" width="1.0" height="32"/><rect fill="#272822" x="0.0" y="217" width="50.6" height="32"/><rect fill="#272822" x="49.6" y="217" width="75.4" height="32"/><rect fill="#272822" x="124.0" y="217" width="13.4" height="32"/><rect fill="#272822" x="136.4" y="217" width="13.4" height="32"/><rect fill="#272822" x="148.8" y="217" width="50.6" height="32"/><rect fill="#272822" x="198.4" y="217" width="968.2" height="32"/><rect fill="#191919" x="1165.6000000000001" y="217" width="1.0" height="32"/><rect fill="#272822" x="0.0" y="248" width="50.6" height="32"/><rect fill="#272822" x="49.6" y="248" width="38.2" height="32"/><rect fill="#272822" x="86.8" y="248" width="87.8" height="32"/><rect fill="#272822" x="173.6" y="248" width="25.8" height="32"/><rect fill="#272822" x="198.4" y="248" width="162.20000000000002" height="32"/><rect fill="#272822" x="359.6" y="248" width="807.0" height="32"/><rect fill="#191919" x="1165.6000000000001" y="248" width="1.0" height="32"/><rect fill="#272822" x="0.0" y="279" width="100.2" height="32"/><rect fill="#272822" x="99.2" y="279" width="63.0" height="32"/><rect fill="#272822" x="161.20000000000002" y="279" width="100.2" height="32"/><rect fill="#272822" x="260.40000000000003" y="279" width="63.0" height="32"/><rect fill="#272822" x="322.40000000000003" y="279" width="199.4" height="32"/><rect fill="#272822" x="520.8000000000001" y="279" width="645.8000000000001" height="32"/><rect fill="#191919" x="1165.6000000000001" y="279" width="1.0" height="32"/><rect fill="#272822" x="0.0" y="310" width="100.2" height="32"/><rect fill="#272822" x="99.2" y="310" width="75.4" height="32"/><rect fill="#272822" x="173.6" y="310" width="13.4" height="32"/><rect fill="#272822" x="186.0" y="310" width="13.4" height="32"/><rect fill="#272822" x="198.4" y="310" width="63.0" height="32"/><rect fill="#272822" x="260.40000000000003" y="310" width="906.2" height="32"/><rect fill="#191919" x="1165.6000000000001" y="310" width="1.0" height="32"/><rect fill="#272822" x="0.0" y="341" width="100.2" height="32"/><rect fill="#272822" x="99.2" y="341" width="187.0" height="32"/><rect fill="#272822" x="285.2" y="341" width="13.4" height="32"/><rect fill="#272822" x="297.6" y="341" width="75.4" height="32"/><rect fill="#272822" x="372.0" y="341" width="794.6" height="32"/><rect fill="#191919" x="1165.6000000000001" y="341" width="1.0" height="32"/><rect fill="#272822" x="0.0" y="372" width="50.6" height="32"/><rect fill="#272822" x="49.6" y="372" width="63.0" height="32"/><rect fill="#272822" x="111.60000000000001" y="372" width="100.2" height="32"/><rect fill="#272822" x="210.8" y="372" width="50.6" height="32"/><rect fill="#272822" x="260.40000000000003" y="372" width="199.4" height="32"/><rect fill="#272822" x="458.8" y="372" width="707.8000000000001" height="32"/><rect fill="#191919" x="1165.6000000000001" y="372" width="1.0" height="32"/><rect fill="#272822" x="0.0" y="403" width="1166.6000000000001" height="32"/><rect fill="#191919" x="1165.6000000000001" y="403" width="1.0" height="32"/><rect fill="#b9bcba" x="0.0" y="434" width="137.4" height="32"/><rect fill="#191919" x="136.4" y="434" width="1030.2" height="32"/><rect fill="#191919" x="1165.6000000000001" y="434" width="1.0" height="32"/>
<text alignment-baseline="baseline" class="terminal-2997888498-matrix"><tspan class="terminal-2997888498-r1" x="0.0" y="20" textLength="38">def</tspan><tspan class="terminal-2997888498-r2" x="37.2" y="20" textLength="13"> </tspan><tspan class="terminal-2997888498-r3" x="49.6" y="20" textLength="186">loop_first_last</tspan><tspan class="terminal-2997888498-r2" x="235.6" y="20" textLength="273">(values: Iterable[T]) </tspan><tspan class="terminal-2997888498-r4" x="508.40000000000003" y="20" textLength="25">-&gt;</tspan><tspan class="terminal-2997888498-r2" x="533.2" y="20" textLength="397"> Iterable[Tuple[bool, bool, T]]:</tspan><tspan class="terminal-2997888498-r5" x="930.0" y="20" textLength="236">                   </tspan><tspan class="terminal-2997888498-r5" x="1165.6000000000001" y="20" textLength="13">
</tspan><tspan class="terminal-2997888498-r6" x="0.0" y="51" textLength="50">│   </tspan><tspan class="terminal-2997888498-r7" x="49.6" y="51" textLength="893">&quot;&quot;&quot;Iterate and generate a tuple with a flag for first and last value.&quot;&quot;&quot;</tspan><tspan class="terminal-2997888498-r5" x="942.4" y="51" textLength="224">                  </tspan><tspan class="terminal-2997888498-r5" x="1165.6000000000001" y="51" textLength="13">
</tspan><tspan class="terminal-2997888498-r6" x="0.0" y="82" textLength="50">│   </tspan><tspan class="terminal-2997888498-r2" x="49.6" y="82" textLength="149">iter_values </tspan><tspan class="terminal-2997888498-r4" x="198.4" y="82" textLength="13">=</tspan><tspan class="terminal-2997888498-r2" x="210.8" y="82" textLength="162"> iter(values)</tspan><tspan class="terminal-2997888498-r5" x="372.0" y="82" textLength="794">                                                                </tspan><tspan class="terminal-2997888498-r5" x="1165.6000000000001" y="82" textLength="13">
</tspan><tspan class="terminal-2997888498-r6" x="0.0" y="113" textLength="50">│   </tspan><tspan class="terminal-2997888498-r1" x="49.6" y="113" textLength="38">try</tspan><tspan class="terminal-2997888498-r2" x="86.8" y="113" textLength="13">:</tspan><tspan class="terminal-2997888498-r5" x="99.2" y="113" textLength="1067">                                                                                      </tspan><tspan class="terminal-2997888498-r5" x="1165.6000000000001" y="113" textLength="13">
</tspan><tspan class="terminal-2997888498-r6" x="0.0" y="144" textLength="100">│   │   </tspan><tspan class="terminal-2997888498-r2" x="99.2" y="144" textLength="186">previous_value </tspan><tspan class="terminal-2997888498-r4" x="285.2" y="144" textLength="13">=</tspan><tspan class="terminal-2997888498-r2" x="297.6" y="144" textLength="224"> next(iter_values)</tspan><tspan class="terminal-2997888498-r5" x="520.8000000000001" y="144" textLength="645">                                                    </tspan><tspan class="terminal-2997888498-r5" x="1165.6000000000001" y="144" textLength="13">
</tspan><tspan class="terminal-2997888498-r6" x="0.0" y="175" textLength="50">│   </tspan><tspan class="terminal-2997888498-r1" x="49.6" y="175" textLength="75">except</tspan><tspan class="terminal-2997888498-r2" x="124.0" y="175" textLength="13"> </tspan><tspan class="terminal-2997888498-r3" x="136.4" y="175" textLength="162">StopIteration</tspan><tspan class="terminal-2997888498-r2" x="297.6" y="175" textLength="13">:</tspan><tspan class="terminal-2997888498-r5" x="310.0" y="175" textLength="856">                                                                     </tspan><tspan class="terminal-2997888498-r5" x="1165.6000000000001" y="175" textLength="13">
</tspan><tspan class="terminal-2997888498-r6" x="0.0" y="206" textLength="100">│   │   </tspan><tspan class="terminal-2997888498-r1" x="99.2" y="206" textLength="75">return</tspan><tspan class="terminal-2997888498-r5" x="173.6" y="206" textLength="992">                                                                                </tspan><tspan class="terminal-2997888498-r5" x="1165.6000000000001" y="206" textLength="13">
</tspan><tspan class="terminal-2997888498-r6" x="0.0" y="237" textLength="50">│   </tspan><tspan class="terminal-2997888498-r2" x="49.6" y="237" textLength="75">first </tspan><tspan class="terminal-2997888498-r4" x="124.0" y="237" textLength="13">=</tspan><tspan class="terminal-2997888498-r2" x="136.4" y="237" textLength="13"> </tspan><tspan class="terminal-2997888498-r1" x="148.8" y="237" textLength="50">True</tspan><tspan class="terminal-2997888498-r5" x="198.4" y="237" textLength="968">                                                                              </tspan><tspan class="terminal-2997888498-r5" x="1165.6000000000001" y="237" textLength="13">
</tspan><tspan class="terminal-2997888498-r6" x="0.0" y="268" textLength="50">│   </tspan><tspan class="terminal-2997888498-r1" x="49.6" y="268" textLength="38">for</tspan><tspan class="terminal-2997888498-r2" x="86.8" y="268" textLength="87"> value </tspan><tspan class="terminal-2997888498-r4" x="173.6" y="268" textLength="25">in</tspan><tspan class="terminal-2997888498-r2" x="198.4" y="268" textLength="162"> iter_values:</tspan><tspan class="terminal-2997888498-r5" x="359.6" y="268" textLength="806">                                                                 </tspan><tspan class="terminal-2997888498-r5" x="1165.6000000000001" y="268" textLength="13">
</tspan><tspan class="terminal-2997888498-r6" x="0.0" y="299" textLength="100">│   │   </tspan><tspan class="terminal-2997888498-r1" x="99.2" y="299" textLength="62">yield</tspan><tspan class="terminal-2997888498-r2" x="161.20000000000002" y="299" textLength="100"> first, </tspan><tspan class="terminal-2997888498-r1" x="260.40000000000003" y="299" textLength="62">False</tspan><tspan class="terminal-2997888498-r2" x="322.40000000000003" y="299" textLength="199">, previous_value</tspan><tspan class="terminal-2997888498-r5" x="520.8000000000001" y="299" textLength="645">                                                    </tspan><tspan class="terminal-2997888498-r5" x="1165.6000000000001" y="299" textLength="13">
</tspan><tspan class="terminal-2997888498-r6" x="0.0" y="330" textLength="100">│   │   </tspan><tspan class="terminal-2997888498-r2" x="99.2" y="330" textLength="75">first </tspan><tspan class="terminal-2997888498-r4" x="173.6" y="330" textLength="13">=</tspan><tspan class="terminal-2997888498-r2" x="186.0" y="330" textLength="13"> </tspan><tspan class="terminal-2997888498-r1" x="198.4" y="330" textLength="62">False</tspan><tspan class="terminal-2997888498-r5" x="260.40000000000003" y="330" textLength="906">                                                                         </tspan><tspan class="terminal-2997888498-r5" x="1165.6000000000001" y="330" textLength="13">
</tspan><tspan class="terminal-2997888498-r6" x="0.0" y="361" textLength="100">│   │   </tspan><tspan class="terminal-2997888498-r2" x="99.2" y="361" textLength="186">previous_value </tspan><tspan class="terminal-2997888498-r4" x="285.2" y="361" textLength="13">=</tspan><tspan class="terminal-2997888498-r2" x="297.6" y="361" textLength="75"> value</tspan><tspan class="terminal-2997888498-r5" x="372.0" y="361" textLength="794">                                                                </tspan><tspan class="terminal-2997888498-r5" x="1165.6000000000001" y="361" textLength="13">
</tspan><tspan class="terminal-2997888498-r6" x="0.0" y="392" textLength="50">│   </tspan><tspan class="terminal-2997888498-r1" x="49.6" y="392" textLength="62">yield</tspan><tspan class="terminal-2997888498-r2" x="111.60000000000001" y="392" textLength="100"> first, </tspan><tspan class="terminal-2997888498-r1" x="210.8" y="392" textLength="50">True</tspan><tspan class="terminal-2997888498-r2" x="260.40000000000003" y="392" textLength="199">, previous_value</tspan><tspan class="terminal-2997888498-r5" x="458.8" y="392" textLength="707">                                                         </tspan><tspan class="terminal-2997888498-r5" x="1165.6000000000001" y="392" textLength="13">
</tspan><tspan class="terminal-2997888498-r5" x="0.0" y="423" textLength="1166">                                                                                              </tspan><tspan class="terminal-2997888498-r5" x="1165.6000000000001" y="423" textLength="13">
</tspan><tspan class="terminal-2997888498-r8" x="0.0" y="454" textLength="137">Hello World</tspan><tspan class="terminal-2997888498-r5" x="136.4" y="454" textLength="1030">                                                                                   </tspan><tspan class="terminal-2997888498-r5" x="1165.6000000000001" y="454" textLength="13">
</tspan></text>
</g>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment