aboutsummaryrefslogtreecommitdiffhomepage
path: root/services/nuldoc/public/blog/posts/2024-07-19/reparojson-fix-only-json-formatter
diff options
context:
space:
mode:
authornsfisis <nsfisis@gmail.com>2026-02-07 23:06:23 +0900
committernsfisis <nsfisis@gmail.com>2026-02-07 23:06:23 +0900
commit9d5ec5e3bc01c6174dea048e118edee579c36565 (patch)
tree8bdb98836728e14f61bad56043f67bb352590963 /services/nuldoc/public/blog/posts/2024-07-19/reparojson-fix-only-json-formatter
parent479747454273abdbe9b5cc3f5c3dd18bbda7741a (diff)
downloadnsfisis.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')
-rw-r--r--services/nuldoc/public/blog/posts/2024-07-19/reparojson-fix-only-json-formatter/index.html107
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 編集が可能となる。