1 files changed, 61 insertions, 52 deletions
diff --git a/vhosts/blog/public/posts/2024-07-19/reparojson-fix-only-json-formatter/index.html b/vhosts/blog/public/posts/2024-07-19/reparojson-fix-only-json-formatter/index.html
index c5724274..6fb4f0d0 100644
--- a/vhosts/blog/public/posts/2024-07-19/reparojson-fix-only-json-formatter/index.html
+++ b/vhosts/blog/public/posts/2024-07-19/reparojson-fix-only-json-formatter/index.html
@@ -14,8 +14,7 @@
     <meta property="og:locale" content="ja_JP">
     <link rel="icon" type="image/svg+xml" href="/favicon.svg">
     <title>reparojson: 文法エラーを直すだけの JSON フォーマッタを作った｜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">
@@ -91,17 +90,19 @@
                次のように動作する。
             </p>
              
-            <pre class="highlight"><code>$ echo &apos;[ 1 2 ]&apos; | reparojson
-[ 1, 2 ]
-
-$ echo &apos;[ 1, 2, ]&apos; | reparojson
-[ 1, 2 ]
-
-$ echo &apos;{ &quot;foo&quot;: 1 &quot;bar&quot;: 2 }&apos; | reparojson
-{ &quot;foo&quot;: 1, &quot;bar&quot;: 2 }
-
-$ echo &apos;{ &quot;foo&quot;: 1, &quot;bar&quot;: 2, }&apos; | reparojson
-{ &quot;foo&quot;: 1, &quot;bar&quot;: 2 }</code></pre>
+            <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>
+            </div>
              
             <p>
                バージョン 0.1.1 時点で修正対象の文法エラーは次のとおり: 
@@ -140,33 +141,35 @@ $ echo &apos;{ &quot;foo&quot;: 1, &quot;bar&quot;: 2, }&apos; | reparojson
                ここでは、<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>
              
-            <pre class="highlight" language="lua"><code class="highlight"><span class="hljs-keyword">local</span> lspconfig = <span class="hljs-built_in">require</span>(<span class="hljs-string">&#x27;lspconfig&#x27;</span>)
-
-lspconfig.efm.setup({
-   init_options = { documentFormatting = <span class="hljs-literal">true</span> },
-   settings = {
-      rootMarkers = {<span class="hljs-string">&quot;.git/&quot;</span>},
-      languages = {
-         json = {
-            {
-               formatCommand = <span class="hljs-string">&quot;reparojson -q&quot;</span>,
-               formatStdin = <span class="hljs-literal">true</span>,
-            },
-         },
-      },
-   }
-})
-
-vim.api.nvim_create_autocmd(<span class="hljs-string">&#x27;LspAttach&#x27;</span>, {
-   callback = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span></span>
-      vim.api.nvim_create_autocmd(<span class="hljs-string">&#x27;BufWritePre&#x27;</span>, {
-         buffer = e.buf,
-         callback = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>
-            vim.lsp.buf.<span class="hljs-built_in">format</span>({ async = <span class="hljs-literal">false</span> })
-         <span class="hljs-keyword">end</span>
-      })
-   <span class="hljs-keyword">end</span>,
-})</code></pre>
+            <div class="codeblock" language="lua">
+              <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>
+            </div>
              
             <p>
                ほとんどは nvim-lspconfig と efm-langserver を使う際のボイラープレートだが、<code>formatCommand</code> で <code>-q</code> フラグを指定していることに注意してほしい。このツールは、デフォルトでは JSON が修正された場合 exit code 1 で終了する。これは、入力が最初から正しかった場合と修正して正しくなった場合を区別するためだが、異常終了してしまうと置き換えが発生しない。そのため、<code>-q</code> フラグを指定して、修正されたときも exit code 0 で終了するようにしている。
@@ -179,28 +182,34 @@ vim.api.nvim_create_autocmd(<span class="hljs-string">&#x27;LspAttach&#x27;</spa
                このツールが威力を発揮するのは、行の入れ換え時である。次のような JSON があり、
             </p>
              
-            <pre class="highlight" language="json"><code class="highlight"><span class="hljs-punctuation">{</span>
-   <span class="hljs-attr">&quot;a&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-literal"><span class="hljs-keyword">true</span></span><span class="hljs-punctuation">,</span>
-   <span class="hljs-attr">&quot;b&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-literal"><span class="hljs-keyword">false</span></span>
-<span class="hljs-punctuation">}</span></code></pre>
+            <div class="codeblock" language="json">
+              <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>
+            </div>
              
             <p>
                2行目と3行目を入れ換えて以下のように編集した。
             </p>
              
-            <pre class="highlight" language="json"><code class="highlight"><span class="hljs-punctuation">{</span>
-   <span class="hljs-attr">&quot;b&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-literal"><span class="hljs-keyword">false</span></span>
-   <span class="hljs-attr">&quot;a&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-literal"><span class="hljs-keyword">true</span></span><span class="hljs-punctuation">,</span>
-<span class="hljs-punctuation">}</span></code></pre>
+            <div class="codeblock" language="json">
+              <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>
+            </div>
              
             <p>
                これは不正な JSON だが、このツールを通せば次のようになる。
             </p>
              
-            <pre class="highlight" language="json"><code class="highlight"><span class="hljs-punctuation">{</span>
-   <span class="hljs-attr">&quot;b&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-literal"><span class="hljs-keyword">false</span></span><span class="hljs-punctuation">,</span>
-   <span class="hljs-attr">&quot;a&quot;</span><span class="hljs-punctuation">:</span> <span class="hljs-literal"><span class="hljs-keyword">true</span></span>
-<span class="hljs-punctuation">}</span></code></pre>
+            <div class="codeblock" language="json">
+              <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>
+            </div>
              
             <p>
                もちろん、このような操作を文法を壊さずにおこなう Vim プラグインは存在する。しかし、単なる行の入れ換えであれば <code>ddp</code> の3ストロークでおこなうことができ、専用のキーバインドを覚える必要もない。このツールを用いることで、より Vimmer-friendly な JSON 編集が可能となる。