はてなブログにソースコードを貼り付ける

 たかのりうむです。

 

ブログをはじめて、ちょこちょことカスタマイズもしていきたいと思ってます。

 

その過程で、CSSを書くこともちらほら出て来るでしょう。そのカスタマイズの備忘録もかねて、記事にCSSのコードを記載していきたいと思います。

これなんだっけ?ってなったときにまたググって…。てなるのが目に見えてるし、面倒なので。笑

 

で、せっかくコードを残していくなら見た目もきれいにしときたいよね。と思ったので、はてなにソースを書く方法を調べました。さっそく備忘録。

 

はてなブログにはソースを貼り付ける機能がある

なんと。調べたところ驚愕の事実。デフォルトでそういうのがあるみたいですね。使い方は簡単で、

 

>||

||<

 

…の部分はコードを書くだけとのこと。

さっそく試したところ、

>||

#include<stdio.h>

int main(void){

 printf("hello world ");

 return 0;

}

||<

 

…、おい、そのまんまやないか。笑

 

 ソースを貼り付けるときは、編集モードをはてな記法モードにする

どうもそういうことみたいです。

編集モードをはてな記法モードにしてさっきのコードを貼ると、

#include<stdio.h>
 int main(void){
  printf("hello world\n");
  return 0;
}

おお!なんかそれっぽい!ただ、色味がなくて寂しい…。でも大丈夫!シンタックスハイライトにも対応してるみたいです。やり方としては、頭のたて棒二本の間に言語名を書くだけ。今だと、

>|c|

#include<stdio.h>

int main(void){

 printf("hello world ");

 return 0;

}

||<

てな具合。すると、

#include<stdio.h>
 int main(void){
  printf("hello world\n");
  return 0;
}

わーお!しゃれおつ!見た目は満足なんですが、1個だけ問題が…。

 

はてなモードと見たままモードで、編集をいったり来たりできない…。

けっこう致命的でした。笑

意気揚々と見たままモードに切り替えようとしたら、「書いてある内容全部消すね!」って。鬼だね。とにかく、せっかくかいても全部消えちゃうんです。えー、とは思ったもののしょうがないですよね。じゃあどうするのよって話なんですが、

 

はてなモードでソースだけかいてプレビュー。それをコピペ。

必要なソースをはてなモードでばばっと全部書いておいて、それをプレビュー。プレビュー画面からソースの領域をコピーして見たままモードに貼り付ける。

という事をしないといけません。これはイケてないですね…。でもしょうがない。

 

まとめ

  • はてな記法モードで、>||(ソース)||< でソースの貼り付けが可能。
  • シンタックスハイライトするときは、>|(言語名)|(ソース)||<
  • はてな記法モードで記述してプレビューの内容をコピペして、「見たままモード」に貼り付け

ですね。多少のめんどくささはありますが、見た目のためにはこれくらい何のそのですね。次からじゃんじゃん使っていきます。