1 files changed, 55 insertions, 50 deletions
diff --git a/services/nuldoc/public/blog/posts/2024-07-19/reparojson-fix-only-json-formatter/index.html b/services/nuldoc/public/blog/posts/2024-07-19/reparojson-fix-only-json-formatter/index.html
index 50bbf5ee..bf60bb52 100644
--- a/services/nuldoc/public/blog/posts/2024-07-19/reparojson-fix-only-json-formatter/index.html
+++ b/services/nuldoc/public/blog/posts/2024-07-19/reparojson-fix-only-json-formatter/index.html
@@ -106,17 +106,18 @@
               次のように動作する。
             </p>
             <div class="codeblock">
-              <pre class="shiki github-light" style="background-color:#f5f5f5;color:#24292e" tabindex="0"><code><span class="line"><span>$ echo '[ 1 2 ]' | reparojson</span></span>
-<span class="line"><span>[ 1, 2 ]</span></span>
-<span class="line"><span></span></span>
-<span class="line"><span>$ echo '[ 1, 2, ]' | reparojson</span></span>
-<span class="line"><span>[ 1, 2 ]</span></span>
-<span class="line"><span></span></span>
-<span class="line"><span>$ echo '{ "foo": 1 "bar": 2 }' | reparojson</span></span>
-<span class="line"><span>{ "foo": 1, "bar": 2 }</span></span>
-<span class="line"><span></span></span>
-<span class="line"><span>$ echo '{ "foo": 1, "bar": 2, }' | reparojson</span></span>
-<span class="line"><span>{ "foo": 1, "bar": 2 }</span></span></code></pre>
+              <pre class="highlight" style="background-color:#f5f5f5"><code>$ echo '[ 1 2 ]' | reparojson
+[ 1, 2 ]
+
+$ echo '[ 1, 2, ]' | reparojson
+[ 1, 2 ]
+
+$ echo '{ "foo": 1 "bar": 2 }' | reparojson
+{ "foo": 1, "bar": 2 }
+
+$ echo '{ "foo": 1, "bar": 2, }' | reparojson
+{ "foo": 1, "bar": 2 }
+</code></pre>
             </div>
             <p>
               バージョン 0.1.1 時点で修正対象の文法エラーは次のとおり:
@@ -148,33 +149,34 @@
               ここでは、 <a href="https://github.com/neovim/nvim-lspconfig" rel="noreferrer" target="_blank">nvim-lspconfig</a> と <a href="https://github.com/mattn/efm-langserver" rel="noreferrer" target="_blank">efm-langserver</a> を用いた設定例を紹介する。
             </p>
             <div class="codeblock">
-              <pre class="shiki github-light" style="background-color:#f5f5f5;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#D73A49">   local</span><span style="color:#24292E"> lspconfig </span><span style="color:#D73A49">=</span><span style="color:#005CC5"> require</span><span style="color:#24292E">(</span><span style="color:#032F62">'lspconfig'</span><span style="color:#24292E">)</span></span>
-<span class="line"></span>
-<span class="line"><span style="color:#24292E">   lspconfig.</span><span style="color:#6F42C1">efm</span><span style="color:#24292E">.</span><span style="color:#005CC5">setup</span><span style="color:#24292E">({</span></span>
-<span class="line"><span style="color:#24292E">      init_options </span><span style="color:#D73A49">=</span><span style="color:#24292E"> { documentFormatting </span><span style="color:#D73A49">=</span><span style="color:#005CC5"> true</span><span style="color:#24292E"> },</span></span>
-<span class="line"><span style="color:#24292E">      settings </span><span style="color:#D73A49">=</span><span style="color:#24292E"> {</span></span>
-<span class="line"><span style="color:#24292E">         rootMarkers </span><span style="color:#D73A49">=</span><span style="color:#24292E"> {</span><span style="color:#032F62">".git/"</span><span style="color:#24292E">},</span></span>
-<span class="line"><span style="color:#24292E">         languages </span><span style="color:#D73A49">=</span><span style="color:#24292E"> {</span></span>
-<span class="line"><span style="color:#24292E">            json </span><span style="color:#D73A49">=</span><span style="color:#24292E"> {</span></span>
-<span class="line"><span style="color:#24292E">               {</span></span>
-<span class="line"><span style="color:#24292E">                  formatCommand </span><span style="color:#D73A49">=</span><span style="color:#032F62"> "reparojson -q"</span><span style="color:#24292E">,</span></span>
-<span class="line"><span style="color:#24292E">                  formatStdin </span><span style="color:#D73A49">=</span><span style="color:#005CC5"> true</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>
-<span class="line"><span style="color:#24292E">         },</span></span>
-<span class="line"><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">   vim.</span><span style="color:#6F42C1">api</span><span style="color:#24292E">.</span><span style="color:#005CC5">nvim_create_autocmd</span><span style="color:#24292E">(</span><span style="color:#032F62">'LspAttach'</span><span style="color:#24292E">, {</span></span>
-<span class="line"><span style="color:#6F42C1">      callback</span><span style="color:#D73A49"> =</span><span style="color:#D73A49"> function</span><span style="color:#24292E">(e)</span></span>
-<span class="line"><span style="color:#24292E">         vim.</span><span style="color:#6F42C1">api</span><span style="color:#24292E">.</span><span style="color:#005CC5">nvim_create_autocmd</span><span style="color:#24292E">(</span><span style="color:#032F62">'BufWritePre'</span><span style="color:#24292E">, {</span></span>
-<span class="line"><span style="color:#24292E">            buffer </span><span style="color:#D73A49">=</span><span style="color:#24292E"> e.</span><span style="color:#6F42C1">buf</span><span style="color:#24292E">,</span></span>
-<span class="line"><span style="color:#6F42C1">            callback</span><span style="color:#D73A49"> =</span><span style="color:#D73A49"> function</span><span style="color:#24292E">()</span></span>
-<span class="line"><span style="color:#24292E">               vim.</span><span style="color:#6F42C1">lsp</span><span style="color:#24292E">.</span><span style="color:#6F42C1">buf</span><span style="color:#24292E">.</span><span style="color:#005CC5">format</span><span style="color:#24292E">({ async </span><span style="color:#D73A49">=</span><span style="color:#005CC5"> false</span><span style="color:#24292E"> })</span></span>
-<span class="line"><span style="color:#D73A49">            end</span></span>
-<span class="line"><span style="color:#24292E">         })</span></span>
-<span class="line"><span style="color:#D73A49">      end</span><span style="color:#24292E">,</span></span>
-<span class="line"><span style="color:#24292E">   })</span></span></code></pre>
+              <pre class="highlight" style="background-color:#f5f5f5"><code>   <span style="color: #cf222e">local</span> <span style="color: #24292f;background-color: #f6f8fa">lspconfig</span> <span style="color: #0550ae">=</span> <span style="color: #953800">require</span><span style="color: #24292f;background-color: #f6f8fa">(</span><span style="color: #0a3069">'lspconfig'</span><span style="color: #24292f;background-color: #f6f8fa">)</span>
+
+   <span style="color: #24292f;background-color: #f6f8fa">lspconfig</span><span style="color: #24292f;background-color: #f6f8fa">.</span><span style="color: #24292f;background-color: #f6f8fa">efm</span><span style="color: #24292f;background-color: #f6f8fa">.</span><span style="color: #24292f;background-color: #f6f8fa">setup</span><span style="color: #24292f;background-color: #f6f8fa">({</span>
+      <span style="color: #24292f;background-color: #f6f8fa">init_options</span> <span style="color: #0550ae">=</span> <span style="color: #24292f;background-color: #f6f8fa">{</span> <span style="color: #24292f;background-color: #f6f8fa">documentFormatting</span> <span style="color: #0550ae">=</span> <span style="color: #0550ae">true</span> <span style="color: #24292f;background-color: #f6f8fa">},</span>
+      <span style="color: #24292f;background-color: #f6f8fa">settings</span> <span style="color: #0550ae">=</span> <span style="color: #24292f;background-color: #f6f8fa">{</span>
+         <span style="color: #24292f;background-color: #f6f8fa">rootMarkers</span> <span style="color: #0550ae">=</span> <span style="color: #24292f;background-color: #f6f8fa">{</span><span style="color: #0a3069">".git/"</span><span style="color: #24292f;background-color: #f6f8fa">},</span>
+         <span style="color: #24292f;background-color: #f6f8fa">languages</span> <span style="color: #0550ae">=</span> <span style="color: #24292f;background-color: #f6f8fa">{</span>
+            <span style="color: #24292f;background-color: #f6f8fa">json</span> <span style="color: #0550ae">=</span> <span style="color: #24292f;background-color: #f6f8fa">{</span>
+               <span style="color: #24292f;background-color: #f6f8fa">{</span>
+                  <span style="color: #24292f;background-color: #f6f8fa">formatCommand</span> <span style="color: #0550ae">=</span> <span style="color: #0a3069">"reparojson -q"</span><span style="color: #24292f;background-color: #f6f8fa">,</span>
+                  <span style="color: #24292f;background-color: #f6f8fa">formatStdin</span> <span style="color: #0550ae">=</span> <span style="color: #0550ae">true</span><span style="color: #24292f;background-color: #f6f8fa">,</span>
+               <span style="color: #24292f;background-color: #f6f8fa">},</span>
+            <span style="color: #24292f;background-color: #f6f8fa">},</span>
+         <span style="color: #24292f;background-color: #f6f8fa">},</span>
+      <span style="color: #24292f;background-color: #f6f8fa">}</span>
+   <span style="color: #24292f;background-color: #f6f8fa">})</span>
+
+   <span style="color: #24292f;background-color: #f6f8fa">vim</span><span style="color: #24292f;background-color: #f6f8fa">.</span><span style="color: #24292f;background-color: #f6f8fa">api</span><span style="color: #24292f;background-color: #f6f8fa">.</span><span style="color: #24292f;background-color: #f6f8fa">nvim_create_autocmd</span><span style="color: #24292f;background-color: #f6f8fa">(</span><span style="color: #0a3069">'LspAttach'</span><span style="color: #24292f;background-color: #f6f8fa">,</span> <span style="color: #24292f;background-color: #f6f8fa">{</span>
+      <span style="color: #24292f;background-color: #f6f8fa">callback</span> <span style="color: #0550ae">=</span> <span style="color: #cf222e">function</span><span style="color: #24292f;background-color: #f6f8fa">(</span><span style="color: #24292f;background-color: #f6f8fa">e</span><span style="color: #24292f;background-color: #f6f8fa">)</span>
+         <span style="color: #24292f;background-color: #f6f8fa">vim</span><span style="color: #24292f;background-color: #f6f8fa">.</span><span style="color: #24292f;background-color: #f6f8fa">api</span><span style="color: #24292f;background-color: #f6f8fa">.</span><span style="color: #24292f;background-color: #f6f8fa">nvim_create_autocmd</span><span style="color: #24292f;background-color: #f6f8fa">(</span><span style="color: #0a3069">'BufWritePre'</span><span style="color: #24292f;background-color: #f6f8fa">,</span> <span style="color: #24292f;background-color: #f6f8fa">{</span>
+            <span style="color: #24292f;background-color: #f6f8fa">buffer</span> <span style="color: #0550ae">=</span> <span style="color: #24292f;background-color: #f6f8fa">e</span><span style="color: #24292f;background-color: #f6f8fa">.</span><span style="color: #24292f;background-color: #f6f8fa">buf</span><span style="color: #24292f;background-color: #f6f8fa">,</span>
+            <span style="color: #24292f;background-color: #f6f8fa">callback</span> <span style="color: #0550ae">=</span> <span style="color: #cf222e">function</span><span style="color: #24292f;background-color: #f6f8fa">()</span>
+               <span style="color: #24292f;background-color: #f6f8fa">vim</span><span style="color: #24292f;background-color: #f6f8fa">.</span><span style="color: #24292f;background-color: #f6f8fa">lsp</span><span style="color: #24292f;background-color: #f6f8fa">.</span><span style="color: #24292f;background-color: #f6f8fa">buf</span><span style="color: #24292f;background-color: #f6f8fa">.</span><span style="color: #24292f;background-color: #f6f8fa">format</span><span style="color: #24292f;background-color: #f6f8fa">({</span> <span style="color: #24292f;background-color: #f6f8fa">async</span> <span style="color: #0550ae">=</span> <span style="color: #0550ae">false</span> <span style="color: #24292f;background-color: #f6f8fa">})</span>
+            <span style="color: #cf222e">end</span>
+         <span style="color: #24292f;background-color: #f6f8fa">})</span>
+      <span style="color: #cf222e">end</span><span style="color: #24292f;background-color: #f6f8fa">,</span>
+   <span style="color: #24292f;background-color: #f6f8fa">})</span>
+</code></pre>
             </div>
             <p>
               ほとんどは nvim-lspconfig と efm-langserver を使う際のボイラープレートだが、<code>formatCommand</code> で <code>-q</code> フラグを指定していることに注意してほしい。このツールは、デフォルトでは JSON が修正された場合 exit code 1 で終了する。これは、入力が最初から正しかった場合と修正して正しくなった場合を区別するためだが、異常終了してしまうと置き換えが発生しない。そのため、<code>-q</code> フラグを指定して、修正されたときも exit code 0 で終了するようにしている。
@@ -186,28 +188,31 @@
               このツールが威力を発揮するのは、行の入れ換え時である。次のような JSON があり、
             </p>
             <div class="codeblock">
-              <pre class="shiki github-light" style="background-color:#f5f5f5;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#24292E">   {</span></span>
-<span class="line"><span style="color:#005CC5">      "a"</span><span style="color:#24292E">: </span><span style="color:#005CC5">true</span><span style="color:#24292E">,</span></span>
-<span class="line"><span style="color:#005CC5">      "b"</span><span style="color:#24292E">: </span><span style="color:#005CC5">false</span></span>
-<span class="line"><span style="color:#24292E">   }</span></span></code></pre>
+              <pre class="highlight" style="background-color:#f5f5f5"><code><span style="color: #24292f;background-color: #f6f8fa">   </span><span style="color: #24292f;background-color: #f6f8fa">{</span><span style="color: #24292f;background-color: #f6f8fa">
+      </span><span style="color: #0550ae">"a"</span><span style="color: #24292f;background-color: #f6f8fa">:</span><span style="color: #24292f;background-color: #f6f8fa"> </span><span style="color: #0550ae">true</span><span style="color: #24292f;background-color: #f6f8fa">,</span><span style="color: #24292f;background-color: #f6f8fa">
+      </span><span style="color: #0550ae">"b"</span><span style="color: #24292f;background-color: #f6f8fa">:</span><span style="color: #24292f;background-color: #f6f8fa"> </span><span style="color: #0550ae">false</span><span style="color: #24292f;background-color: #f6f8fa">
+   </span><span style="color: #24292f;background-color: #f6f8fa">}</span>
+</code></pre>
             </div>
             <p>
               2行目と3行目を入れ換えて以下のように編集した。
             </p>
             <div class="codeblock">
-              <pre class="shiki github-light" style="background-color:#f5f5f5;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#24292E">   {</span></span>
-<span class="line"><span style="color:#005CC5">      "b"</span><span style="color:#24292E">: </span><span style="color:#005CC5">false</span></span>
-<span class="line"><span style="color:#032F62">      "a"</span><span style="color:#B31D28;font-style:italic">:</span><span style="color:#005CC5"> true</span><span style="color:#24292E">,</span></span>
-<span class="line"><span style="color:#24292E">   }</span></span></code></pre>
+              <pre class="highlight" style="background-color:#f5f5f5"><code><span style="color: #24292f;background-color: #f6f8fa">   </span><span style="color: #24292f;background-color: #f6f8fa">{</span><span style="color: #24292f;background-color: #f6f8fa">
+      </span><span style="color: #0550ae">"b"</span><span style="color: #24292f;background-color: #f6f8fa">:</span><span style="color: #24292f;background-color: #f6f8fa"> </span><span style="color: #0550ae">false</span><span style="color: #24292f;background-color: #f6f8fa">
+      </span><span style="color: #0550ae">"a"</span><span style="color: #24292f;background-color: #f6f8fa">:</span><span style="color: #24292f;background-color: #f6f8fa"> </span><span style="color: #0550ae">true</span><span style="color: #24292f;background-color: #f6f8fa">,</span><span style="color: #24292f;background-color: #f6f8fa">
+   </span><span style="color: #24292f;background-color: #f6f8fa">}</span>
+</code></pre>
             </div>
             <p>
               これは不正な JSON だが、このツールを通せば次のようになる。
             </p>
             <div class="codeblock">
-              <pre class="shiki github-light" style="background-color:#f5f5f5;color:#24292e" tabindex="0"><code><span class="line"><span style="color:#24292E">   {</span></span>
-<span class="line"><span style="color:#005CC5">      "b"</span><span style="color:#24292E">: </span><span style="color:#005CC5">false</span><span style="color:#24292E">,</span></span>
-<span class="line"><span style="color:#005CC5">      "a"</span><span style="color:#24292E">: </span><span style="color:#005CC5">true</span></span>
-<span class="line"><span style="color:#24292E">   }</span></span></code></pre>
+              <pre class="highlight" style="background-color:#f5f5f5"><code><span style="color: #24292f;background-color: #f6f8fa">   </span><span style="color: #24292f;background-color: #f6f8fa">{</span><span style="color: #24292f;background-color: #f6f8fa">
+      </span><span style="color: #0550ae">"b"</span><span style="color: #24292f;background-color: #f6f8fa">:</span><span style="color: #24292f;background-color: #f6f8fa"> </span><span style="color: #0550ae">false</span><span style="color: #24292f;background-color: #f6f8fa">,</span><span style="color: #24292f;background-color: #f6f8fa">
+      </span><span style="color: #0550ae">"a"</span><span style="color: #24292f;background-color: #f6f8fa">:</span><span style="color: #24292f;background-color: #f6f8fa"> </span><span style="color: #0550ae">true</span><span style="color: #24292f;background-color: #f6f8fa">
+   </span><span style="color: #24292f;background-color: #f6f8fa">}</span>
+</code></pre>
             </div>
             <p>
               もちろん、このような操作を文法を壊さずにおこなう Vim プラグインは存在する。しかし、単なる行の入れ換えであれば <code>ddp</code> の3ストロークでおこなうことができ、専用のキーバインドを覚える必要もない。このツールを用いることで、より Vimmer-friendly な JSON 編集が可能となる。