diff options
| author | nsfisis <nsfisis@gmail.com> | 2026-02-07 23:06:23 +0900 |
|---|---|---|
| committer | nsfisis <nsfisis@gmail.com> | 2026-02-07 23:06:23 +0900 |
| commit | 9d5ec5e3bc01c6174dea048e118edee579c36565 (patch) | |
| tree | 8bdb98836728e14f61bad56043f67bb352590963 /services/nuldoc/public/blog/posts/2024-07-19/reparojson-fix-only-json-formatter/index.html | |
| parent | 479747454273abdbe9b5cc3f5c3dd18bbda7741a (diff) | |
| download | nsfisis.dev-9d5ec5e3bc01c6174dea048e118edee579c36565.tar.gz nsfisis.dev-9d5ec5e3bc01c6174dea048e118edee579c36565.tar.zst nsfisis.dev-9d5ec5e3bc01c6174dea048e118edee579c36565.zip | |
fix(style): fix codeblock style for rouge
Diffstat (limited to 'services/nuldoc/public/blog/posts/2024-07-19/reparojson-fix-only-json-formatter/index.html')
| -rw-r--r-- | services/nuldoc/public/blog/posts/2024-07-19/reparojson-fix-only-json-formatter/index.html | 107 |
1 files changed, 51 insertions, 56 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 4856480e..009ca8f9 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 @@ -15,7 +15,7 @@ <meta name="Hatena::Bookmark" content="nocomment"> <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=81dfc0b483beda175e3e17562faac7c9"> + <link rel="stylesheet" href="/style.css?h=c3724e2d900f13528c82005e79a8ec23"> </head> <body class="single"> <header class="header"> @@ -106,18 +106,17 @@ 次のように動作する。 </p> <div class="codeblock"> - <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> + <pre class="highlight" style="background-color:#f5f5f5"><code><div class="codeblock-line">$ echo '[ 1 2 ]' | reparojson +</div><div class="codeblock-line">[ 1, 2 ] +</div><div class="codeblock-line"> +</div><div class="codeblock-line">$ echo '[ 1, 2, ]' | reparojson +</div><div class="codeblock-line">[ 1, 2 ] +</div><div class="codeblock-line"> +</div><div class="codeblock-line">$ echo '{ "foo": 1 "bar": 2 }' | reparojson +</div><div class="codeblock-line">{ "foo": 1, "bar": 2 } +</div><div class="codeblock-line"> +</div><div class="codeblock-line">$ echo '{ "foo": 1, "bar": 2, }' | reparojson +</div><div class="codeblock-line">{ "foo": 1, "bar": 2 }</div></code></pre> </div> <p> バージョン 0.1.1 時点で修正対象の文法エラーは次のとおり: @@ -149,34 +148,33 @@ $ echo '{ "foo": 1, "bar": 2, }' | 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> <div class="codeblock"> - <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> + <pre class="highlight" style="background-color:#f5f5f5"><code><div class="codeblock-line"> <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> +</div><div class="codeblock-line"> +</div><div class="codeblock-line"> <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> +</div><div class="codeblock-line"> <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> +</div><div class="codeblock-line"> <span style="color: #24292f;background-color: #f6f8fa">settings</span> <span style="color: #0550ae">=</span> <span style="color: #24292f;background-color: #f6f8fa">{</span> +</div><div class="codeblock-line"> <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> +</div><div class="codeblock-line"> <span style="color: #24292f;background-color: #f6f8fa">languages</span> <span style="color: #0550ae">=</span> <span style="color: #24292f;background-color: #f6f8fa">{</span> +</div><div class="codeblock-line"> <span style="color: #24292f;background-color: #f6f8fa">json</span> <span style="color: #0550ae">=</span> <span style="color: #24292f;background-color: #f6f8fa">{</span> +</div><div class="codeblock-line"> <span style="color: #24292f;background-color: #f6f8fa">{</span> +</div><div class="codeblock-line"> <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> +</div><div class="codeblock-line"> <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> +</div><div class="codeblock-line"> <span style="color: #24292f;background-color: #f6f8fa">},</span> +</div><div class="codeblock-line"> <span style="color: #24292f;background-color: #f6f8fa">},</span> +</div><div class="codeblock-line"> <span style="color: #24292f;background-color: #f6f8fa">},</span> +</div><div class="codeblock-line"> <span style="color: #24292f;background-color: #f6f8fa">}</span> +</div><div class="codeblock-line"> <span style="color: #24292f;background-color: #f6f8fa">})</span> +</div><div class="codeblock-line"> +</div><div class="codeblock-line"> <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> +</div><div class="codeblock-line"> <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> +</div><div class="codeblock-line"> <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> +</div><div class="codeblock-line"> <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> +</div><div class="codeblock-line"> <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> +</div><div class="codeblock-line"> <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> +</div><div class="codeblock-line"> <span style="color: #cf222e">end</span> +</div><div class="codeblock-line"> <span style="color: #24292f;background-color: #f6f8fa">})</span> +</div><div class="codeblock-line"> <span style="color: #cf222e">end</span><span style="color: #24292f;background-color: #f6f8fa">,</span> +</div><div class="codeblock-line"> <span style="color: #24292f;background-color: #f6f8fa">})</span></div></code></pre> </div> <p> ほとんどは nvim-lspconfig と efm-langserver を使う際のボイラープレートだが、<code>formatCommand</code> で <code>-q</code> フラグを指定していることに注意してほしい。このツールは、デフォルトでは JSON が修正された場合 exit code 1 で終了する。これは、入力が最初から正しかった場合と修正して正しくなった場合を区別するためだが、異常終了してしまうと置き換えが発生しない。そのため、<code>-q</code> フラグを指定して、修正されたときも exit code 0 で終了するようにしている。 @@ -188,31 +186,28 @@ $ echo '{ "foo": 1, "bar": 2, }' | reparojson このツールが威力を発揮するのは、行の入れ換え時である。次のような JSON があり、 </p> <div class="codeblock"> - <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> + <pre class="highlight" style="background-color:#f5f5f5"><code><div class="codeblock-line"><span style="color: #24292f;background-color: #f6f8fa"> </span><span style="color: #24292f;background-color: #f6f8fa">{</span> +</div><div class="codeblock-line"><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> +</div><div class="codeblock-line"><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> +</div><div class="codeblock-line"><span style="color: #24292f;background-color: #f6f8fa"> </span><span style="color: #24292f;background-color: #f6f8fa">}</span></div></code></pre> </div> <p> 2行目と3行目を入れ換えて以下のように編集した。 </p> <div class="codeblock"> - <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> + <pre class="highlight" style="background-color:#f5f5f5"><code><div class="codeblock-line"><span style="color: #24292f;background-color: #f6f8fa"> </span><span style="color: #24292f;background-color: #f6f8fa">{</span> +</div><div class="codeblock-line"><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> +</div><div class="codeblock-line"><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> +</div><div class="codeblock-line"><span style="color: #24292f;background-color: #f6f8fa"> </span><span style="color: #24292f;background-color: #f6f8fa">}</span></div></code></pre> </div> <p> これは不正な JSON だが、このツールを通せば次のようになる。 </p> <div class="codeblock"> - <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> + <pre class="highlight" style="background-color:#f5f5f5"><code><div class="codeblock-line"><span style="color: #24292f;background-color: #f6f8fa"> </span><span style="color: #24292f;background-color: #f6f8fa">{</span> +</div><div class="codeblock-line"><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> +</div><div class="codeblock-line"><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> +</div><div class="codeblock-line"><span style="color: #24292f;background-color: #f6f8fa"> </span><span style="color: #24292f;background-color: #f6f8fa">}</span></div></code></pre> </div> <p> もちろん、このような操作を文法を壊さずにおこなう Vim プラグインは存在する。しかし、単なる行の入れ換えであれば <code>ddp</code> の3ストロークでおこなうことができ、専用のキーバインドを覚える必要もない。このツールを用いることで、より Vimmer-friendly な JSON 編集が可能となる。 |
