|
| Photo by Artem Sapegin on Unsplash |
※この記事は2020年7月31日の投稿を再編集したものです。
※この記事は2021年5月19日の投稿を再編集したものです。
HTML コードを整形してくれるツールを探していたら、すでに持っていたという話。
Blogger の HTML コードは読みづらい
Blogger は編集したテキストを HTML コードに変換してくれる。
ところが、この
HTML
コードは、改行がほとんどなく、インデントもされないので、非常に読みづらい。
修正したい箇所を探すのにいつも苦労していた。
Fig.1 Blogger が変換してくれた HTML コードの例
HTML コードを整形するツール
そこで HTML コードを整形してくれるツールを探してみたところ、いろいろなオンラインツールが提供されていることがわかった。
- HTMLのコード整形ツール
- ＨＴＭＬ整形ツール（プチ・デバッグ機能付き）
- Free Online HTML Formatter - FreeFormatter.com
- Online Code Beautifier for JavaScript, HTML, CSS and PHP
- DirtyMarkup Formatter - HTML, CSS, & JavaScript Beautifier
- Online code convert tools and utilities - Beautify Converters beautifyconverter.com
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 をクリックしてみた。
なんと、あの読みづらいコードをきれいに整形してくれるではないか！
Fig.3 PyCharm で HTML コードを整形した結果
目からウロコとはまさにこのことだ。
PyCharm は見事に悩みを解決してくれた。
PyCharm のインストール方法
PyCharm のインストール方法は「 PyCharm を Windows 10 にインストールする 」に掲載しているのでよければご覧いただきたい。
2022年8月27日
Blogger にも HTML コードを整形する機能がある。
赤枠のボタンをクリックするだけで整形してくれる。
 |
| HTML整形 |
