自分のブログにAtom風ソースコードを貼り付ける方法【コピペ可】

こんにちは。
ブログにソースコード貼りたいですよね？
貼りたくないですか？

私は今までブログにコードを貼るときはGISTを使ってたんですけど、やっぱり背景はダークテーマじゃないと違和感あるんですよね。
見づらいですし。

IT系のブログを書いている方は皆さんきれいに自分のコードをブログに貼っていてうらやましいなぁと思ったので、やり方を調べてみたんですよ。
そしたら思ったより手間！
ブログにちょろっとコード差し込むだけでいちいちクラスとか毎回書いてらんないですよね。
メンタリストのダイゴも、継続のためにはいかに手間を減らすかが重要だ！って言ってましたし。

私はそんなに長いコード貼る予定もないので、ぶっちゃけシンタックスライトとかはいいかなと思ったので、トレードオフということで、preタグだけでコードを貼れるようにcssを書いてみました。
正直『Atom風』というのはタイトル詐欺感ありますが、あくまで風なので許してね。

難しいことはよくわからんし面倒なことはしたくないけどコードを貼りたいって方は、CSSコピペすればいいだけなのでぜひ使ってください。
今後改良していく予定。

ブログにAtom風にコードを貼り付ける

はい、こんな感じにコードを貼れます。

  from flask import Flask
  app = Flask(__name__)
  
  @app.route('/')
  def hello():
      return 'heloo world'

この装飾のためのCSSはこちら。

  pre{
  	width: 100%;
  	background-color: #2b2b2b;
  	font-size: 14px;
  	color: #fffef9;
  	padding: 2% 3%;
  	overflow: auto;
  	border-radius: 2%;
  	line-height: 1.5em;
  	font-family: "Meiryo";
  	letter-spacing: 0.2;
  }

たったこれだけ！
めちゃ簡単！

あとは表示したいコードをHTMLのpreタグの中にコピペすればあっというに完成です！
おめでとう！

今後コードはちょいちょい修正してくかもです。
いつかほんとにAtom風になる日も近いかも？
それではまた。