ソースコードを色んなとこにきれいに簡単に埋め込む

投稿日:2018/02/22

前置き

どうも、...挨拶面倒だな、やめとこ(本日2つ目の記事)。

今回は作成したソースコードをそのままコピーペースとしても簡単に・綺麗に表示させることができるような、私が採用している2つの方法についてです。
まずHPに、HTMLとCSSだけで準備し、ソースコードのコピペするだけで綺麗に描画されるようにする方法を、そしてもう1つはレポートなどでよく使うWordにコピペする方法を、書いていきます。

HPに埋め込む

preタグとcodeタグを用いることでソースコードを描画できる話は多いです(「<」とか「&」とかの特殊文字は置き換える必要がありますが)。
ただ、個人的にpreタグを使うと若干装飾が思い通りにいかないということがあったので、preタグを使うことはあまり好まないかなと感じます。
代わりにcodeタグについてCSSで、「white-space」を設定するとpreタグよりは柔軟に装飾をいじれるようになりました。
下にpreタグ・「white-space:pre;」・「white-space:pre-wrap;」それぞれの結果を記載します。
※preタグと「white-space」のいずれにしても、ソースコードを貼り付ける際は、HTMLによるインデントを無視した方がよさそうです。

See the Pen codePasting by Reeg0000 (@Reeg0000) on CodePen.

CSSのinline-heightの影響であるらしいが、1つ目のpreタグと2つ目の「white-space:pre;」を比較すると、preタグの方にはソースコードの上下に余計な余白ができてしまい、なかなか取り除けない苦難がありました。
その点において先述した装飾の崩れというものがあり、preタグを使うことに抵抗ができてしまったのです。

またもう1つ、「white-space:pre-wrap;」というものがあり、これは特定の部分で勝手に改行されるというものです。
まぁ使わないかな。

PastedInExcel

【図1】
クリックで拡大表示されます。

PastedInWord

【図2】
クリックで拡大表示されます。

Wordに埋め込む

Wordにソースコードを埋め込むには、テキストボックスを用いるとかそういうヤワではありませんw
私の場合、 表を1x1だけ挿入して、その中にコピペ(テキストのみ保持)しています。

また、Wordにソースコードをそのままコピペしてもいいのですが、行段落が欲しい時があると思います。
その場合は、Wordにコピペする前に、【図1】のようにExcelにコピペ(左に1行空けて、1セル選んでペーストすればいいです)して、空けた左の行に段落番号を書いていき、その段落番号とソースをコピー、そしてWordにペースト(テキストのみ保持)すれば【図2】のようにできます。

ただ、Wordへのそのままのコピペならばどの開発環境のインデントは保持されるようですが、Excelを通してのコピペに関しては、【図1】と【図2】にあるように、VSCodeからのソースコードに段落番号を付けてWordに貼り付けたものは、インデントが無くなっていました。
メモ帳(notepad)で開けば楽でしょうが、まぁ、開発環境によってはもしかしたらこのやり方が好ましくないとかいうのはあるかもしれません。

最後に

以上で、ソースコードの埋め込みについて2つ、書いてきました。
終わり! ^^) _旦~~

タグ:

Comment

コメントはありません。
There's no comment.