データサイエンティストハトリのブログ

PythonとインテリジェントクラウドとAIが好きな学生エンジニア。データ分析、スクレイピング、就職活動などについて書いていきます。

はてなの「見たままモード」で直接コードを書く方法

f:id:hatorihatorihatorik:20180929044306j:plain

 

こんにちは、どうもハトリです!!

 

TwitterでプログラミングやIT関連のことについてつぶやいているのでよかったら是非フォローしてください →→(@tori_engineer)

 

 

 

はてなの記事にプログラミングのコードを書くときは、はてな記法Markdown記法に設定しないと書く方法がありません。(あったら教えてください)

 

でも、これがとってもめんどくさいwww見たままモードで記事を書く→はてな記法に移行をしようとすると、書いたものがすべて消えます。

 

普段は見たままで書いてるのに、コードを載せる時だけ全部はてな記法にするのってめんどくさいですよね?

 

そこで、見たままモードでプログラミングコードを書く方法を作って見ました! 

はてなの「見たままモード」でコードを書く手順

CSSの設定 

※この設定は最初の1回だけやればOKです。毎回やらないように!

 

 [デザイン]>[カスタマイズ]>[デザインCSS]

 

.code{
 background-color: #e8e8e8;
 padding: 20px;
}

これを記入。 

記事の側の設定

※この設定は毎回やってください! 

見たままモードで記事を全て書き終えた後に、画面左上の[HTML編集]をクリック。コードが書いてある箇所を探してください。

 

f:id:hatorihatorihatorik:20180629154902p:plain

 

コードが書いてある場所は最初はこんな感じで<p>タグで囲われていると思います。

 

f:id:hatorihatorihatorik:20180629154908p:plain

 

これを、上記のように、コードに当たる部分を<div class="code"> .... </div>で囲ってあげてください。

 

完成です。コード部分の背景色が変わり見やすくなりました。