1 files changed, 66 insertions, 49 deletions
diff --git a/vhosts/blog/public/posts/2022-10-23/phperkaigi-2023-unused-token-quiz-1/index.html b/vhosts/blog/public/posts/2022-10-23/phperkaigi-2023-unused-token-quiz-1/index.html
index 8d72a4f2..efc80674 100644
--- a/vhosts/blog/public/posts/2022-10-23/phperkaigi-2023-unused-token-quiz-1/index.html
+++ b/vhosts/blog/public/posts/2022-10-23/phperkaigi-2023-unused-token-quiz-1/index.html
@@ -14,8 +14,7 @@
     <meta property="og:locale" content="ja_JP">
     <link rel="icon" type="image/svg+xml" href="/favicon.svg">
     <title>PHPerKaigi 2023: ボツになったトークン問題 その 1｜REPL: Rest-Eat-Program Loop</title>
-    <link rel="stylesheet" href="/style.css?h=79020a898c7052f79b32e90376a4497d">
-    <link rel="stylesheet" href="/hl.css?h=340e65ffd5c17713efc9107c06304f7b">
+    <link rel="stylesheet" href="/style.css?h=60eb349e583f5bd51518a7eb98598043">
   </head>
   <body class="single">
     <header class="header">
@@ -86,27 +85,29 @@
                注意: これはボツ問なので、得られたトークンを PHPerKaigi で入力してもポイントにはならない。
             </p>
              
-            <pre class="highlight" language="php"><code class="highlight"><span class="hljs-meta">&lt;?php</span>
-
-$π = <span class="hljs-variable">$argv</span>[<span class="hljs-number">1</span>] ?? <span class="hljs-literal">null</span>;
-<span class="hljs-keyword">if</span> ($π === <span class="hljs-literal">null</span>) {
-  <span class="hljs-keyword">exit</span>(<span class="hljs-string">&#x27;No input.&#x27;</span>);
-}
-$π = <span class="hljs-title function_ invoke__">trim</span>($π);
-<span class="hljs-keyword">if</span> (!<span class="hljs-title function_ invoke__">is_numeric</span>($π)) {
-  <span class="hljs-keyword">exit</span>(<span class="hljs-string">&#x27;Invalid input.&#x27;</span>);
-}
-
-<span class="hljs-variable">$s</span> = <span class="hljs-title function_ invoke__">implode</span>(<span class="hljs-title function_ invoke__">array_map</span>(<span class="hljs-title function_ invoke__">chr</span>(...), <span class="hljs-title function_ invoke__">str_split</span>($π, <span class="hljs-number">2</span>)));
-
-<span class="hljs-title function_ invoke__">preg_match</span>(<span class="hljs-string">&#x27;/(\x23.+?) /&#x27;</span>, <span class="hljs-variable">$s</span>, <span class="hljs-variable">$m</span>);
-<span class="hljs-variable">$t</span> = <span class="hljs-variable">$m</span>[<span class="hljs-number">1</span>] ?? <span class="hljs-string">&#x27;&#x27;</span>;
-
-<span class="hljs-keyword">if</span> (<span class="hljs-title function_ invoke__">md5</span>(<span class="hljs-variable">$t</span>) === <span class="hljs-string">&#x27;056e831a4146bf123e8ea16613303d2e&#x27;</span>) {
-  <span class="hljs-keyword">echo</span> <span class="hljs-string">&quot;Token: <span class="hljs-subst">{$t}</span>\n&quot;</span>;
-} <span class="hljs-keyword">else</span> {
-  <span class="hljs-keyword">echo</span> <span class="hljs-string">&quot;Failed.\n&quot;</span>;
-}</code></pre>
+            <div class="codeblock" language="php">
+              <pre class="shiki github-light" style="background-color:#f5f5f5;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">&#x3C;?</span><span style="color:#005CC5">php</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#24292E">$π </span><span style="color:#D73A49">=</span><span style="color:#24292E"> $argv[</span><span style="color:#005CC5">1</span><span style="color:#24292E">] </span><span style="color:#D73A49">??</span><span style="color:#005CC5"> null</span><span style="color:#24292E">;</span></span>
+<span class="line"><span style="color:#D73A49">if</span><span style="color:#24292E"> ($π </span><span style="color:#D73A49">===</span><span style="color:#005CC5"> null</span><span style="color:#24292E">) {</span></span>
+<span class="line"><span style="color:#D73A49">  exit</span><span style="color:#24292E">(</span><span style="color:#032F62">'No input.'</span><span style="color:#24292E">);</span></span>
+<span class="line"><span style="color:#24292E">}</span></span>
+<span class="line"><span style="color:#24292E">$π </span><span style="color:#D73A49">=</span><span style="color:#005CC5"> trim</span><span style="color:#24292E">($π);</span></span>
+<span class="line"><span style="color:#D73A49">if</span><span style="color:#24292E"> (</span><span style="color:#D73A49">!</span><span style="color:#005CC5">is_numeric</span><span style="color:#24292E">($π)) {</span></span>
+<span class="line"><span style="color:#D73A49">  exit</span><span style="color:#24292E">(</span><span style="color:#032F62">'Invalid input.'</span><span style="color:#24292E">);</span></span>
+<span class="line"><span style="color:#24292E">}</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#24292E">$s </span><span style="color:#D73A49">=</span><span style="color:#005CC5"> implode</span><span style="color:#24292E">(</span><span style="color:#005CC5">array_map</span><span style="color:#24292E">(</span><span style="color:#005CC5">chr</span><span style="color:#24292E">(</span><span style="color:#D73A49">...</span><span style="color:#24292E">), </span><span style="color:#005CC5">str_split</span><span style="color:#24292E">($π, </span><span style="color:#005CC5">2</span><span style="color:#24292E">)));</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#005CC5">preg_match</span><span style="color:#24292E">(</span><span style="color:#032F62">'/(</span><span style="color:#22863A;font-weight:bold">\x</span><span style="color:#032F62">23.</span><span style="color:#D73A49">+</span><span style="color:#032F62">?) /'</span><span style="color:#24292E">, $s, $m);</span></span>
+<span class="line"><span style="color:#24292E">$t </span><span style="color:#D73A49">=</span><span style="color:#24292E"> $m[</span><span style="color:#005CC5">1</span><span style="color:#24292E">] </span><span style="color:#D73A49">??</span><span style="color:#032F62"> ''</span><span style="color:#24292E">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color:#D73A49">if</span><span style="color:#24292E"> (</span><span style="color:#005CC5">md5</span><span style="color:#24292E">($t) </span><span style="color:#D73A49">===</span><span style="color:#032F62"> '056e831a4146bf123e8ea16613303d2e'</span><span style="color:#24292E">) {</span></span>
+<span class="line"><span style="color:#005CC5">  echo</span><span style="color:#032F62"> "Token: {</span><span style="color:#24292E">$t</span><span style="color:#032F62">}</span><span style="color:#005CC5">\n</span><span style="color:#032F62">"</span><span style="color:#24292E">;</span></span>
+<span class="line"><span style="color:#24292E">} </span><span style="color:#D73A49">else</span><span style="color:#24292E"> {</span></span>
+<span class="line"><span style="color:#005CC5">  echo</span><span style="color:#032F62"> "Failed.</span><span style="color:#005CC5">\n</span><span style="color:#032F62">"</span><span style="color:#24292E">;</span></span>
+<span class="line"><span style="color:#24292E">}</span></span></code></pre>
+            </div>
           </section>
            
           <section id="section--how-to-obtain-token">
@@ -115,15 +116,19 @@ $π = <span class="hljs-title function_ invoke__">trim</span>($π);
                ソースを見るとわかるとおり、<code>$argv[1]</code> を参照している。それを <code>$π</code> なる変数に代入しているので、円周率を渡してみる。
             </p>
              
-            <pre class="highlight" language="shell-session"><code>$ php Q.php 3.14
-Failed.</code></pre>
+            <div class="codeblock" language="shell-session">
+              <pre class="shiki github-light" style="background-color:#f5f5f5;color:#24292e" tabindex="0"><code><span class="line"><span>$ php Q.php 3.14</span></span>
+<span class="line"><span>Failed.</span></span></code></pre>
+            </div>
              
             <p>
                失敗してしまった。精度を上げてみる。
             </p>
              
-            <pre class="highlight" language="shell-session"><code>$ php Q.php 3.1415
-Failed.</code></pre>
+            <div class="codeblock" language="shell-session">
+              <pre class="shiki github-light" style="background-color:#f5f5f5;color:#24292e" tabindex="0"><code><span class="line"><span>$ php Q.php 3.1415</span></span>
+<span class="line"><span>Failed.</span></span></code></pre>
+            </div>
              
             <p>
                だめだった。これを成功するまで繰り返す。
@@ -133,8 +138,10 @@ Failed.</code></pre>
                最初にトークンが得られるのは、小数点以下 16 桁目まで入力したときで、こうなる。
             </p>
              
-            <pre class="highlight" language="shell-session"><code>$ php Q.php 3.1415926535897932
-Token: #YO</code></pre>
+            <div class="codeblock" language="shell-session">
+              <pre class="shiki github-light" style="background-color:#f5f5f5;color:#24292e" tabindex="0"><code><span class="line"><span>$ php Q.php 3.1415926535897932</span></span>
+<span class="line"><span>Token: #YO</span></span></code></pre>
+            </div>
              
             <p>
                めでたくトークン「<code>#YO</code>」が手に入った。
@@ -147,20 +154,24 @@ Token: #YO</code></pre>
                短いので頭から追っていく。
             </p>
              
-            <pre class="highlight" language="php"><code class="highlight">$π = <span class="hljs-variable">$argv</span>[<span class="hljs-number">1</span>] ?? <span class="hljs-literal">null</span>;
-<span class="hljs-keyword">if</span> ($π === <span class="hljs-literal">null</span>) {
-  <span class="hljs-keyword">exit</span>(<span class="hljs-string">&#x27;No input.&#x27;</span>);
-}
-$π = <span class="hljs-title function_ invoke__">trim</span>($π);
-<span class="hljs-keyword">if</span> (!<span class="hljs-title function_ invoke__">is_numeric</span>($π)) {
-  <span class="hljs-keyword">exit</span>(<span class="hljs-string">&#x27;Invalid input.&#x27;</span>);
-}</code></pre>
+            <div class="codeblock" language="php">
+              <pre class="shiki github-light" style="background-color:#f5f5f5;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#24292E">$π </span><span style="color:#D73A49">=</span><span style="color:#24292E"> $argv[</span><span style="color:#005CC5">1</span><span style="color:#24292E">] </span><span style="color:#D73A49">??</span><span style="color:#005CC5"> null</span><span style="color:#24292E">;</span></span>
+<span class="line"><span style="color:#D73A49">if</span><span style="color:#24292E"> ($π </span><span style="color:#D73A49">===</span><span style="color:#005CC5"> null</span><span style="color:#24292E">) {</span></span>
+<span class="line"><span style="color:#D73A49">  exit</span><span style="color:#24292E">(</span><span style="color:#032F62">'No input.'</span><span style="color:#24292E">);</span></span>
+<span class="line"><span style="color:#24292E">}</span></span>
+<span class="line"><span style="color:#24292E">$π </span><span style="color:#D73A49">=</span><span style="color:#005CC5"> trim</span><span style="color:#24292E">($π);</span></span>
+<span class="line"><span style="color:#D73A49">if</span><span style="color:#24292E"> (</span><span style="color:#D73A49">!</span><span style="color:#005CC5">is_numeric</span><span style="color:#24292E">($π)) {</span></span>
+<span class="line"><span style="color:#D73A49">  exit</span><span style="color:#24292E">(</span><span style="color:#032F62">'Invalid input.'</span><span style="color:#24292E">);</span></span>
+<span class="line"><span style="color:#24292E">}</span></span></code></pre>
+            </div>
              
             <p>
                入力のバリデーション部分。数値のみ受け付ける。
             </p>
              
-            <pre class="highlight" language="php"><code class="highlight"><span class="hljs-variable">$s</span> = <span class="hljs-title function_ invoke__">implode</span>(<span class="hljs-title function_ invoke__">array_map</span>(<span class="hljs-title function_ invoke__">chr</span>(...), <span class="hljs-title function_ invoke__">str_split</span>($π, <span class="hljs-number">2</span>)));</code></pre>
+            <div class="codeblock" language="php">
+              <pre class="shiki github-light" style="background-color:#f5f5f5;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#24292E">$s </span><span style="color:#D73A49">=</span><span style="color:#005CC5"> implode</span><span style="color:#24292E">(</span><span style="color:#005CC5">array_map</span><span style="color:#24292E">(</span><span style="color:#005CC5">chr</span><span style="color:#24292E">(</span><span style="color:#D73A49">...</span><span style="color:#24292E">), </span><span style="color:#005CC5">str_split</span><span style="color:#24292E">($π, </span><span style="color:#005CC5">2</span><span style="color:#24292E">)));</span></span></code></pre>
+            </div>
              
             <p>
               <code>$π</code> を 2 文字ごとに区切り (<code>str_split</code>)、数値を ASCII コードと見做して文字に変換 (<code>chr</code>) して結合 (<code>implode</code>) している。
@@ -170,13 +181,17 @@ $π = <span class="hljs-title function_ invoke__">trim</span>($π);
                例えば、<code>$π</code> が <code>&apos;656667&apos;</code> だったとすると、<code>65</code>、<code>66</code>、<code>67</code> に対応した <code>&apos;A&apos;</code>、<code>&apos;B&apos;</code>、<code>&apos;C&apos;</code> へと変換され、<code>&apos;ABC&apos;</code> になる。
             </p>
              
-            <pre class="highlight" language="php"><code class="highlight">$π = <span class="hljs-string">&#x27;656667&#x27;</span>;
-<span class="hljs-variable">$s</span> = <span class="hljs-title function_ invoke__">implode</span>(<span class="hljs-title function_ invoke__">array_map</span>(<span class="hljs-title function_ invoke__">chr</span>(...), <span class="hljs-title function_ invoke__">str_split</span>($π, <span class="hljs-number">2</span>)));
-<span class="hljs-keyword">echo</span> <span class="hljs-variable">$s</span>;
-<span class="hljs-comment">// =&gt; ABC</span></code></pre>
+            <div class="codeblock" language="php">
+              <pre class="shiki github-light" style="background-color:#f5f5f5;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#24292E">$π </span><span style="color:#D73A49">=</span><span style="color:#032F62"> '656667'</span><span style="color:#24292E">;</span></span>
+<span class="line"><span style="color:#24292E">$s </span><span style="color:#D73A49">=</span><span style="color:#005CC5"> implode</span><span style="color:#24292E">(</span><span style="color:#005CC5">array_map</span><span style="color:#24292E">(</span><span style="color:#005CC5">chr</span><span style="color:#24292E">(</span><span style="color:#D73A49">...</span><span style="color:#24292E">), </span><span style="color:#005CC5">str_split</span><span style="color:#24292E">($π, </span><span style="color:#005CC5">2</span><span style="color:#24292E">)));</span></span>
+<span class="line"><span style="color:#005CC5">echo</span><span style="color:#24292E"> $s;</span></span>
+<span class="line"><span style="color:#6A737D">// => ABC</span></span></code></pre>
+            </div>
              
-            <pre class="highlight" language="php"><code class="highlight"><span class="hljs-title function_ invoke__">preg_match</span>(<span class="hljs-string">&#x27;/(\x23.+?) /&#x27;</span>, <span class="hljs-variable">$s</span>, <span class="hljs-variable">$m</span>);
-<span class="hljs-variable">$t</span> = <span class="hljs-variable">$m</span>[<span class="hljs-number">1</span>] ?? <span class="hljs-string">&#x27;&#x27;</span>;</code></pre>
+            <div class="codeblock" language="php">
+              <pre class="shiki github-light" style="background-color:#f5f5f5;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#005CC5">preg_match</span><span style="color:#24292E">(</span><span style="color:#032F62">'/(</span><span style="color:#22863A;font-weight:bold">\x</span><span style="color:#032F62">23.</span><span style="color:#D73A49">+</span><span style="color:#032F62">?) /'</span><span style="color:#24292E">, $s, $m);</span></span>
+<span class="line"><span style="color:#24292E">$t </span><span style="color:#D73A49">=</span><span style="color:#24292E"> $m[</span><span style="color:#005CC5">1</span><span style="color:#24292E">] </span><span style="color:#D73A49">??</span><span style="color:#032F62"> ''</span><span style="color:#24292E">;</span></span></code></pre>
+            </div>
              
             <p>
                正規表現でマッチングしている。<code>\x23</code> は <code>#</code> と同じであることに留意すると、この正規表現は「<code>#</code> から始まる 2 以上の長さ (含 <code>#</code>) の文字列で、最初に現れるスペースまで」にマッチする。つまりこれは、PHPerKaigi におけるトークンである。
@@ -186,11 +201,13 @@ $π = <span class="hljs-title function_ invoke__">trim</span>($π);
                なお、<code>#</code> を直接書いていないのは、<code>/#.+?) /</code> と書くと、<code>#.+?)</code> という意図せぬトークンが登録されてしまうからである。
             </p>
              
-            <pre class="highlight" language="php"><code class="highlight"><span class="hljs-keyword">if</span> (<span class="hljs-title function_ invoke__">md5</span>(<span class="hljs-variable">$t</span>) === <span class="hljs-string">&#x27;056e831a4146bf123e8ea16613303d2e&#x27;</span>) {
-  <span class="hljs-keyword">echo</span> <span class="hljs-string">&quot;Token: <span class="hljs-subst">{$t}</span>\n&quot;</span>;
-} <span class="hljs-keyword">else</span> {
-  <span class="hljs-keyword">echo</span> <span class="hljs-string">&quot;Failed.\n&quot;</span>;
-}</code></pre>
+            <div class="codeblock" language="php">
+              <pre class="shiki github-light" style="background-color:#f5f5f5;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">if</span><span style="color:#24292E"> (</span><span style="color:#005CC5">md5</span><span style="color:#24292E">($t) </span><span style="color:#D73A49">===</span><span style="color:#032F62"> '056e831a4146bf123e8ea16613303d2e'</span><span style="color:#24292E">) {</span></span>
+<span class="line"><span style="color:#005CC5">  echo</span><span style="color:#032F62"> "Token: {</span><span style="color:#24292E">$t</span><span style="color:#032F62">}</span><span style="color:#005CC5">\n</span><span style="color:#032F62">"</span><span style="color:#24292E">;</span></span>
+<span class="line"><span style="color:#24292E">} </span><span style="color:#D73A49">else</span><span style="color:#24292E"> {</span></span>
+<span class="line"><span style="color:#005CC5">  echo</span><span style="color:#032F62"> "Failed.</span><span style="color:#005CC5">\n</span><span style="color:#032F62">"</span><span style="color:#24292E">;</span></span>
+<span class="line"><span style="color:#24292E">}</span></span></code></pre>
+            </div>
              
             <p>
                最後にトークンのハッシュ値を見て、想定解かどうかを確認する。