nyarn.tech

にゃーん

はてなブログでソースコードの背景色をCSSで変更する方法&サンプル

技術っぽいブログを書いていますが、何かが足りない・・・どこか素人っぽい・・・
そうだ!ソースコードの背景が白いからだ!!

はてなブログの便利なところはいっぱいあるのですが、
デフォルトでソースコードをハイライトしてくれるところは特にナイスですね。
こだわりがなければ最初のデザインもかわいいですし。

記法も3種類ありますが、エンジニアならMarkdown!と思ってMarkdown記法で書いています。
ソースコードを貼り付けたいときは

``` go

package main
import "fmt"

fmt.Println("go言語だよ")

```

と書けば

package main  
import "fmt"  

fmt.Println("go言語だよ")

シンタックスハイライトが有効になります。快適!

ただコードの背景が黒い方が玄人っぽくてかっこいい目に優しく見やすいので、変更してみました。
ググったら大体方法が出てくるのも、はてブの便利なところ。

orangain.hatenablog.com

こちらの記事を参考にCSSを追加しました。

スマホから見るとなぜか元のCSSのままですが、スマホからがっつりコードを見ることもないかなあと思い諦めました。

元の記事だとrubyでの文字列の""結構派手な赤になってしまい変に目立つので緑に変更しました。

puts "Hello World!"

ということでPCからだと少し見やすくなったかもしれません!
目指せ強いプログラマ