こうかの雑記

こうかの雑記

昔の懐かしいこと、ubuntuのこと、その他いろいろ

ソースコードをブログに載せる方法

 「pythonとtkinterでグラフィック・アート」のページで初めてpythonスクリプトを掲載しました。その時に使わせて貰った便利なサイトを紹介します。

 WEBページにソースコード(プログラムやHTML、CSS等)を単純にページに貼り付けると予期しない結果になります。その原因はブラウザがそのページのHTMLとCSSを解釈するときに、貼り付けられたソースの中身まで解釈しようとすることから起きます。
 なので、ソースの中でブラウザに解釈されないように幾つかの文字について別の表現に置き換える必要が有ります。このように置き換えることをエスケープ処理と言います。
 該当する文字と置き換え文字列の例を挙げますと
  <  &lt;
  >  &gt;
  "  &quot;
  &  &amp; 等があります。

 またHTMLの連続した半角空白は1つの半角空白に置き換えられて表示されますので、半角空白でレイアウトしている場合は崩れてしまいます。普通は半角空白で字下げして行の始まりを揃えているのが普通ですから、これが崩れると読みにくくなります。

 特にpythonの場合は字下げに大きな意味があるので、わけが分からなくなります。これを防ぐ為にソースコードを<pre></pre>で囲む必要があります。また、ソースコードであることが分かるように<code></code>でも囲みます。

 ソースコード中の該当文字を都度、置き換えるのは大変ですが、これを自動でやってくれる有り難いサイトが有ります。

HTMLエスケープツール | Web制作小物ツール - dounokouno.com

https://webtools.dounokouno.com/htmlescape/

 

 ソースコードを変換前の枠内に貼り付けて

 <code></code>で囲む、<pre></pre>で囲むの2つのオプション共にチェックが付いていることを確認してから変換ボタンをクリックします。

 変換後のソースコードをCtrl+Cでクリップボードに取り出して、ブログの編集画面をHTML編集に切り替えて、Ctrl+Vの貼り付けで済みます。

 

Web制作小物ツール - dounokouno.com さんに感謝します。