Web ページにソースコードを掲載する方法

Photo by Chris Ried on Unsplash

ソースコードを掲載する方法が知りたい

次のようなデザインでソースコードをWebページに掲載したくなったので、いろいろとネットを検索してみたが、納得できるような記事が見つからなかった。

def main(strText):
    print(strText)

main("Hello world")

PyCharm を使うことに

仕方なく PyCharm のエディタにソースコードを書き、コピーしてはブログのエディタに貼り付けたところ、色もそのまま表示できた。

HTMLエディタで見ると次のようなコードになっていた。

<pre style="background-color: #2b2b2b; color: #a9b7c6; 
font-family: 'JetBrains Mono'; font-size: 9.8pt; ">
<span style=" color: #cc7832;">def </span>
<span style="color: #ffc66d;">main</span>(strText):
<span style="color: #8888c6;">    print</span>(strText)

main(<span style="color: #6a8759;">"Hello world"</span>)
</pre>

実際に表示してみるとインデントや改行がずれることもあるが、HTMLエディタで編集し直せばよい。

PyCharm に限らず、他のIDEでも同じようにできるかも知れない。

できなかったことができるようになりスッキリ！

世界にたった一つ、あなただけのドメインを登録しよう！
クラウド型レンタルサーバー
WordPressを使うならロリポップ！
簡単インストール完備で楽々スタート！
Xserver Business