diff --git a/index.html b/index.html
index cd707e8..271345e 100644
--- a/index.html
+++ b/index.html
@@ -124,9 +124,35 @@
and finally
</li>
<li>Compute the code as <img class="math" src="math/mod.svg" alt="y \bmod{10^d}" height="18"
- style="vertical-align: -3px">.
+ style="vertical-align: -3px">, zero-padded to <var>d</var> digits.
</li>
</ol>
+ <p class="card-text">Express as Python code, the last 3 steps would look like:</p>
+ <pre class="highlight"><code><span class="n">i</span> <span class="o">=</span> <span class="n">h</span><span
+ class="p">[</span><span class="o">-</span><span class="mi">1</span><span class="p">]</span> <span class="o">&</span> <span
+ class="mh">0xF</span>
+<span class="n">y</span> <span class="o">=</span> <span class="p">(</span>
+ <span class="p">(</span><span class="n">h</span><span class="p">[</span><span class="n">i</span> <span
+ class="o">+</span> <span class="mi">0</span><span class="p">]</span> <span class="o">&</span> <span
+ class="mh">0x7F</span><span class="p">)</span> <span class="o"><<</span> <span
+ class="mi">24</span> <span class="o">|</span>
+ <span class="p">(</span><span class="n">h</span><span class="p">[</span><span class="n">i</span> <span
+ class="o">+</span> <span class="mi">1</span><span class="p">]</span> <span class="o">&</span> <span
+ class="mh">0xFF</span><span class="p">)</span> <span class="o"><<</span> <span
+ class="mi">16</span> <span class="o">|</span>
+ <span class="p">(</span><span class="n">h</span><span class="p">[</span><span class="n">i</span> <span
+ class="o">+</span> <span class="mi">2</span><span class="p">]</span> <span class="o">&</span> <span
+ class="mh">0xFF</span><span class="p">)</span> <span class="o"><<</span> <span class="mi">8</span> <span
+ class="o">|</span>
+ <span class="p">(</span><span class="n">h</span><span class="p">[</span><span class="n">i</span> <span
+ class="o">+</span> <span class="mi">3</span><span class="p">]</span> <span class="o">&</span> <span
+ class="mh">0xFF</span><span class="p">)</span>
+<span class="p">)</span>
+<span class="n">code</span> <span class="o">=</span> <span class="nb">str</span><span class="p">(</span><span class="n">y</span> <span
+ class="o">%</span> <span class="mi">10</span><span class="o">**</span><span class="n">d</span><span class="p">)</span><span
+ class="o">.</span><span class="n">rjust</span><span class="p">(</span><span class="n">d</span><span class="p">,</span> <span
+ class="s1">'0'</span><span class="p">)</span>
+</code></pre>
<p class="card-text">To avoid clock synchronization issues, most implementations will accept TOTP codes from the
window before and after the one based on the current time. This tool lets you see the previous and next codes to
help you debug.</p>
diff --git a/src/code.scss b/src/code.scss
new file mode 100644
index 0000000..3687353
--- /dev/null
+++ b/src/code.scss
@@ -0,0 +1,80 @@
+.highlight {
+ background: #f8f8f8;
+
+ .hll { background-color: #ffffcc }
+ .c { color: #8f5902; font-style: italic } /* Comment */
+ .err { color: #a40000; border: 1px solid #ef2929 } /* Error */
+ .g { color: #000000 } /* Generic */
+ .k { color: #204a87; font-weight: bold } /* Keyword */
+ .l { color: #000000 } /* Literal */
+ .n { color: #000000 } /* Name */
+ .o { color: #ce5c00; font-weight: bold } /* Operator */
+ .x { color: #000000 } /* Other */
+ .p { color: #000000; font-weight: bold } /* Punctuation */
+ .ch { color: #8f5902; font-style: italic } /* Comment.Hashbang */
+ .cm { color: #8f5902; font-style: italic } /* Comment.Multiline */
+ .cp { color: #8f5902; font-style: italic } /* Comment.Preproc */
+ .cpf { color: #8f5902; font-style: italic } /* Comment.PreprocFile */
+ .c1 { color: #8f5902; font-style: italic } /* Comment.Single */
+ .cs { color: #8f5902; font-style: italic } /* Comment.Special */
+ .gd { color: #a40000 } /* Generic.Deleted */
+ .ge { color: #000000; font-style: italic } /* Generic.Emph */
+ .gr { color: #ef2929 } /* Generic.Error */
+ .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+ .gi { color: #00A000 } /* Generic.Inserted */
+ .go { color: #000000; font-style: italic } /* Generic.Output */
+ .gp { color: #8f5902 } /* Generic.Prompt */
+ .gs { color: #000000; font-weight: bold } /* Generic.Strong */
+ .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+ .gt { color: #a40000; font-weight: bold } /* Generic.Traceback */
+ .kc { color: #204a87; font-weight: bold } /* Keyword.Constant */
+ .kd { color: #204a87; font-weight: bold } /* Keyword.Declaration */
+ .kn { color: #204a87; font-weight: bold } /* Keyword.Namespace */
+ .kp { color: #204a87; font-weight: bold } /* Keyword.Pseudo */
+ .kr { color: #204a87; font-weight: bold } /* Keyword.Reserved */
+ .kt { color: #204a87; font-weight: bold } /* Keyword.Type */
+ .ld { color: #000000 } /* Literal.Date */
+ .m { color: #0000cf; font-weight: bold } /* Literal.Number */
+ .s { color: #4e9a06 } /* Literal.String */
+ .na { color: #c4a000 } /* Name.Attribute */
+ .nb { color: #204a87 } /* Name.Builtin */
+ .nc { color: #000000 } /* Name.Class */
+ .no { color: #000000 } /* Name.Constant */
+ .nd { color: #5c35cc; font-weight: bold } /* Name.Decorator */
+ .ni { color: #ce5c00 } /* Name.Entity */
+ .ne { color: #cc0000; font-weight: bold } /* Name.Exception */
+ .nf { color: #000000 } /* Name.Function */
+ .nl { color: #f57900 } /* Name.Label */
+ .nn { color: #000000 } /* Name.Namespace */
+ .nx { color: #000000 } /* Name.Other */
+ .py { color: #000000 } /* Name.Property */
+ .nt { color: #204a87; font-weight: bold } /* Name.Tag */
+ .nv { color: #000000 } /* Name.Variable */
+ .ow { color: #204a87; font-weight: bold } /* Operator.Word */
+ .w { color: #f8f8f8; text-decoration: underline } /* Text.Whitespace */
+ .mb { color: #0000cf; font-weight: bold } /* Literal.Number.Bin */
+ .mf { color: #0000cf; font-weight: bold } /* Literal.Number.Float */
+ .mh { color: #0000cf; font-weight: bold } /* Literal.Number.Hex */
+ .mi { color: #0000cf; font-weight: bold } /* Literal.Number.Integer */
+ .mo { color: #0000cf; font-weight: bold } /* Literal.Number.Oct */
+ .sa { color: #4e9a06 } /* Literal.String.Affix */
+ .sb { color: #4e9a06 } /* Literal.String.Backtick */
+ .sc { color: #4e9a06 } /* Literal.String.Char */
+ .dl { color: #4e9a06 } /* Literal.String.Delimiter */
+ .sd { color: #8f5902; font-style: italic } /* Literal.String.Doc */
+ .s2 { color: #4e9a06 } /* Literal.String.Double */
+ .se { color: #4e9a06 } /* Literal.String.Escape */
+ .sh { color: #4e9a06 } /* Literal.String.Heredoc */
+ .si { color: #4e9a06 } /* Literal.String.Interpol */
+ .sx { color: #4e9a06 } /* Literal.String.Other */
+ .sr { color: #4e9a06 } /* Literal.String.Regex */
+ .s1 { color: #4e9a06 } /* Literal.String.Single */
+ .ss { color: #4e9a06 } /* Literal.String.Symbol */
+ .bp { color: #3465a4 } /* Name.Builtin.Pseudo */
+ .fm { color: #000000 } /* Name.Function.Magic */
+ .vc { color: #000000 } /* Name.Variable.Class */
+ .vg { color: #000000 } /* Name.Variable.Global */
+ .vi { color: #000000 } /* Name.Variable.Instance */
+ .vm { color: #000000 } /* Name.Variable.Magic */
+ .il { color: #0000cf; font-weight: bold } /* Literal.Number.Integer.Long */
+}
diff --git a/src/index.scss b/src/index.scss
index 725ddbc..a5f2a2f 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -20,6 +20,8 @@
@import 'bootstrap/scss/_popover.scss';
@import 'bootstrap/scss/_card.scss';
+@import './code';
+
body {
padding-top: $spacer * 4;
}
@@ -131,6 +133,12 @@ h3.card-title {
scroll-margin-top: $spacer * 5;
}
+pre.highlight {
+ display: block;
+ padding: $spacer;
+ border-radius: $border-radius;
+}
+
.footer {
margin-top: $spacer;
background: $body-tertiary-bg;