PyCharm （無償のデスクトップアプリ）を使って HTML コードを整形する ~ rteak

Photo by Artem Sapegin on Unsplash

※この記事は2020年7月31日の投稿を再編集したものです。
※この記事は2021年5月19日の投稿を再編集したものです。

HTML コードを整形してくれるツールを探していたら、すでに持っていたという話。

Table of Contents [Disable]

1.Blogger の HTML コードは読みづらい
2.HTML コードを整形するツール
3.PyCharm で HTML コードが整形できる
4.PyCharm のインストール方法
5.関連記事

Blogger の HTML コードは読みづらい

Blogger は編集したテキストを HTML コードに変換してくれる。
ところが、この HTML コードは、改行がほとんどなく、インデントもされないので、非常に読みづらい。

修正したい箇所を探すのにいつも苦労していた。

	<blockquote style="border: none; margin: 0px 0px 0px 40px; padding: 0px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-CYvw3Vvm8zw/Xqv85Zfh9MI/AAAAAAAAAY8/ABmyFCVX1-E60kdBTgxXh-6dCaOZWmuewCLcBGAsYHQ/s1600/tanner-mardis-xUXGHzhIbN4-unsplash.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1067" data-original-width="1600" height="213" src="https://1.bp.blogspot.com/-CYvw3Vvm8zw/Xqv85Zfh9MI/AAAAAAAAAY8/ABmyFCVX1-E60kdBTgxXh-6dCaOZWmuewCLcBGAsYHQ/s320/tanner-mardis-xUXGHzhIbN4-unsplash.jpg" width="320" /></a></div></blockquote>
	<div style="text-align: center;"><br /></div><div style="text-align: center;"><br /></div>
	<table border="1" bordercolor="#888" cellspacing="0" style="border-collapse: collapse; border-color: rgb(136, 136, 136); border-width: 1px;"><tbody><tr><td style="text-align: center; width: 60px;"><h2><font size="5"><span>日付</span></font></h2></td><td style="text-align: center; width: 60px;"><h2>改訂内容</h2></td></tr><tr><td> 2020/7/25</td><td>テーマをダークモードに変更した。 </td></tr><tr><td> 2020/5/29</td><td>問い合わせが行えるようにした。それに伴い、 Others を右側に移動した。また、 Twitter のフォローボタンを右上に移動した。<br /></td></tr><tr><td> 2020/5/23</td><td>Twitter 投稿ページを追加した。 </td></tr><tr><td> 2020/5/7</td><td>参考・引用サイト一覧と改訂履歴を Blogger の表編集機能で再作成した。  </td></tr><tr><td style="width: 60px;"> 2020/5/6</td><td style="width: 60px;"> テーマを変更した。</td></tr><tr><td> 2020/5/3</td><td> OGPを設定した。</td></tr><tr><td> 2020/5/2</td><td> Links の欄を左側のエリアに設置し、読書メーターの本棚と COVID-19 のニュースサイトにリンクを張った。<br />検索ボックスの欄を左側のエリアに移動した。</td></tr><tr><td> 2020/4/30</td><td> Information の欄を右側のエリアに移動した。</td></tr><tr><td> 2020/4/29</td><td> モバイルのデザインを変更（デフォルトを選択）した。ページを縦３つに分割した。<br />左側はメニュー、中央は本文、右側は広告用のエリアとした。各記事の先頭に写真を掲載した。</td></tr><tr><td> 2020/4/28</td><td> 改訂履歴のページを追加した。参考・引用サイト一覧のページを追加した。</td></tr></tbody></table><br /><br />Photo by <a href="https://unsplash.com/@tannermardis?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Tanner Mardis</a> on <a href="https://unsplash.com/@tannermardis?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a><br /><div style="text-align: left;"><br /></div><div style="text-align: left;"><br /></div>

view raw PyCharm_reformat_befor.html hosted with ❤ by GitHub

Fig.1 Blogger が変換してくれた HTML コードの例

HTML コードを整形するツール

そこで HTML コードを整形してくれるツールを探してみたところ、いろいろなオンラインツールが提供されていることがわかった。

オンラインではなく手元で編集したいという気持ちもあり、モヤモヤは解消できそうもなかった。

PyCharm で HTML コードが整形できる

半ば諦めて上記のオンラインツールの中から選ぼうと思いながら PyCharm を眺めていたところ、ふと PyCharm のメニューに目が止まった。

PyCharm は Windows で使える無償のデスクトップアプリ。
PyCharm は Python の開発環境として使っているが、HTML コードも編集することができる。

それに気づき、HTML に関するメニューを探してみた。

そして、そこに「Code」->「Reformat Code (ctrl + Alt + L)」というのがあった。

Fig.2 PyCharm Code のメニュー

試しに、scratch.html というファイルを作り、そこに Blogger が変換してくれた HTML コードを貼り付け、Reformat Code をクリックしてみた。

なんと、あの読みづらいコードをきれいに整形してくれるではないか！

	<blockquote style="border: none; margin: 0px 0px 0px 40px; padding: 0px;">
	<div class="separator" style="clear: both; text-align: center;"><a
	href="https://1.bp.blogspot.com/-CYvw3Vvm8zw/Xqv85Zfh9MI/AAAAAAAAAY8/ABmyFCVX1-E60kdBTgxXh-6dCaOZWmuewCLcBGAsYHQ/s1600/tanner-mardis-xUXGHzhIbN4-unsplash.jpg"
	style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1067"
	data-original-width="1600" height="213"
	src="https://1.bp.blogspot.com/-CYvw3Vvm8zw/Xqv85Zfh9MI/AAAAAAAAAY8/ABmyFCVX1-E60kdBTgxXh-6dCaOZWmuewCLcBGAsYHQ/s320/tanner-mardis-xUXGHzhIbN4-unsplash.jpg"
	width="320"/></a></div>
	</blockquote>
	<div style="text-align: center;"><br/></div>
	<div style="text-align: center;"><br/></div>
	<table border="1" bordercolor="#888" cellspacing="0"
	style="border-collapse: collapse; border-color: rgb(136, 136, 136); border-width: 1px;">
	<tbody>
	<tr>
	<td style="text-align: center; width: 60px;"><h2><font size="5"><span>日付</span></font></h2></td>
	<td style="text-align: center; width: 60px;"><h2>改訂内容</h2></td>
	</tr>
	<tr>
	<td> 2020/7/25</td>
	<td>テーマをダークモードに変更した。 </td>
	</tr>
	<tr>
	<td> 2020/5/29</td>
	<td>問い合わせが行えるようにした。それに伴い、 Others を右側に移動した。また、 Twitter のフォローボタンを右上に移動した。<br/></td>
	</tr>
	<tr>
	<td> 2020/5/23</td>
	<td>Twitter 投稿ページを追加した。 </td>
	</tr>
	<tr>
	<td> 2020/5/7</td>
	<td>参考・引用サイト一覧と改訂履歴を Blogger の表編集機能で再作成した。  </td>
	</tr>
	<tr>
	<td style="width: 60px;"> 2020/5/6</td>
	<td style="width: 60px;"> テーマを変更した。</td>
	</tr>
	<tr>
	<td> 2020/5/3</td>
	<td> OGPを設定した。</td>
	</tr>
	<tr>
	<td> 2020/5/2</td>
	<td> Links の欄を左側のエリアに設置し、読書メーターの本棚と COVID-19 のニュースサイトにリンクを張った。<br/>検索ボックスの欄を左側のエリアに移動した。</td>
	</tr>
	<tr>
	<td> 2020/4/30</td>
	<td> Information の欄を右側のエリアに移動した。</td>
	</tr>
	<tr>
	<td> 2020/4/29</td>
	<td> モバイルのデザインを変更（デフォルトを選択）した。ページを縦３つに分割した。<br/>左側はメニュー、中央は本文、右側は広告用のエリアとした。各記事の先頭に写真を掲載した。</td>
	</tr>
	<tr>
	<td> 2020/4/28</td>
	<td> 改訂履歴のページを追加した。参考・引用サイト一覧のページを追加した。</td>
	</tr>
	</tbody>
	</table><br/><br/>Photo by <a
	href="https://unsplash.com/@tannermardis?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Tanner
	Mardis</a> on <a
	href="https://unsplash.com/@tannermardis?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
	<br/>
	<div style="text-align: left;"><br/></div>
	<div style="text-align: left;"><br/></div>

view raw PyCharm_reformat_after.html hosted with ❤ by GitHub

Fig.3 PyCharm で HTML コードを整形した結果

目からウロコとはまさにこのことだ。

PyCharm は見事に悩みを解決してくれた。

PyCharm のインストール方法

PyCharm のインストール方法は「 PyCharm を Windows 10 にインストールする」に掲載しているのでよければご覧いただきたい。

2022年8月27日

Blogger にも HTML コードを整形する機能がある。
赤枠のボタンをクリックするだけで整形してくれる。

HTML整形

rteak

return to experience and knowledge

Menu

PyCharm （無償のデスクトップアプリ）を使って HTML コードを整形する

Blogger の HTML コードは読みづらい

HTML コードを整形するツール

PyCharm で HTML コードが整形できる

PyCharm のインストール方法

Welcome

Popular Posts

Links

OTHERS

note

VIEWS

Blogger の HTML コードは読みづらい

HTML コードを整形するツール

PyCharm で HTML コードが整形できる

PyCharm のインストール方法

関連記事

Welcome

Popular Posts

Links

OTHERS

note

VIEWS