カメリアの記事

意味があることやないことを綴ります

はてなブログに VS Code からコピペすると書式も付いてくる

ソフトウェア ウェブ関連 はてなブログ

はてなブログで、 VS Code から「編集 見たまま」タブにそのままコピペすると書式も付いてきますね。これいいんじゃない！？　と思ったんですが気になるところが。

  • コード領域の左側に余白がありません。「HTML編集」タブで padding-left: 15px; くらいすれば問題ないのですが。
  • 行高さが高いですね。 HTML をぱっと見ただけでは行に関係するのは <div> タグなんですが、 margin が作用してるふうでもないし、なんだろうこれ。
  • このコードの HTML がとても複雑で、何か問題になりそうな気がするんですよね。

VS Code から貼り付けたまま

function makeFileName(src) {
  let w0 = src.split("/")
  let w1 = w0[w0.length - 1].split(".")
  let w2 = ""
  for (let i = 0; i < w1.length - 1; i++) {
      w2 += w1[i] + "."
  }
  return w2 + "odt"
}

貼り付けたときの HTML

<div style="color: #f8f8f2; background-color: #272822; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; line-height: 19px; white-space: pre;">
<div><span style="color: #66d9ef; font-style: italic;">function</span><span style="color: #f8f8f2;"> </span><span style="color: #a6e22e;">makeFileName</span><span style="color: #f8f8f2;">(</span><span style="color: #fd971f; font-style: italic;">src</span><span style="color: #f8f8f2;">) {</span></div>
<div><span style="color: #f8f8f2;">  </span><span style="color: #66d9ef; font-style: italic;">let</span><span style="color: #f8f8f2;"> </span><span style="color: #f8f8f2;">w0</span><span style="color: #f8f8f2;"> </span><span style="color: #f92672;">=</span><span style="color: #f8f8f2;"> </span><span style="color: #fd971f; font-style: italic;">src</span><span style="color: #f8f8f2;">.</span><span style="color: #a6e22e;">split</span><span style="color: #f8f8f2;">(</span><span style="color: #e6db74;">"/"</span><span style="color: #f8f8f2;">)</span></div>
<div><span style="color: #f8f8f2;">  </span><span style="color: #66d9ef; font-style: italic;">let</span><span style="color: #f8f8f2;"> </span><span style="color: #f8f8f2;">w1</span><span style="color: #f8f8f2;"> </span><span style="color: #f92672;">=</span><span style="color: #f8f8f2;"> </span><span style="color: #f8f8f2;">w0</span><span style="color: #f8f8f2;">[</span><span style="color: #f8f8f2;">w0</span><span style="color: #f8f8f2;">.length </span><span style="color: #f92672;">-</span><span style="color: #f8f8f2;"> </span><span style="color: #ae81ff;">1</span><span style="color: #f8f8f2;">].</span><span style="color: #a6e22e;">split</span><span style="color: #f8f8f2;">(</span><span style="color: #e6db74;">"."</span><span style="color: #f8f8f2;">)</span></div>
<div><span style="color: #f8f8f2;">  </span><span style="color: #66d9ef; font-style: italic;">let</span><span style="color: #f8f8f2;"> </span><span style="color: #f8f8f2;">w2</span><span style="color: #f8f8f2;"> </span><span style="color: #f92672;">=</span><span style="color: #f8f8f2;"> </span><span style="color: #e6db74;">""</span></div>
<div><span style="color: #f8f8f2;">  </span><span style="color: #f92672;">for</span><span style="color: #f8f8f2;"> (</span><span style="color: #66d9ef; font-style: italic;">let</span><span style="color: #f8f8f2;"> </span><span style="color: #f8f8f2;">i</span><span style="color: #f8f8f2;"> </span><span style="color: #f92672;">=</span><span style="color: #f8f8f2;"> </span><span style="color: #ae81ff;">0</span><span style="color: #f8f8f2;">; </span><span style="color: #f8f8f2;">i</span><span style="color: #f8f8f2;"> </span><span style="color: #f92672;">&lt;</span><span style="color: #f8f8f2;"> </span><span style="color: #f8f8f2;">w1</span><span style="color: #f8f8f2;">.length </span><span style="color: #f92672;">-</span><span style="color: #f8f8f2;"> </span><span style="color: #ae81ff;">1</span><span style="color: #f8f8f2;">; </span><span style="color: #f8f8f2;">i</span><span style="color: #f92672;">++</span><span style="color: #f8f8f2;">) {</span></div>
<div><span style="color: #f8f8f2;">      </span><span style="color: #f8f8f2;">w2</span><span style="color: #f8f8f2;"> </span><span style="color: #f92672;">+=</span><span style="color: #f8f8f2;"> </span><span style="color: #f8f8f2;">w1</span><span style="color: #f8f8f2;">[</span><span style="color: #f8f8f2;">i</span><span style="color: #f8f8f2;">] </span><span style="color: #f92672;">+</span><span style="color: #f8f8f2;"> </span><span style="color: #e6db74;">"."</span></div>
<div><span style="color: #f8f8f2;">  }</span></div>
<div><span style="color: #f8f8f2;">  </span><span style="color: #f92672;">return</span><span style="color: #f8f8f2;"> </span><span style="color: #f8f8f2;">w2</span><span style="color: #f8f8f2;"> </span><span style="color: #f92672;">+</span><span style="color: #f8f8f2;"> </span><span style="color: #e6db74;">"odt"</span></div>
<div><span style="color: #f8f8f2;">}</span></div>
</div>