芋の独り言

当ブログへのアクセスは当ブログのプライバシーポリシーに同意したものとみなします.

はてなブログ(マークダウン記法)でのコードの載っけ方

(私の)今までのやり方

 ``` python
 print('mdashfsaohcxzinhcnisdhvnisuhdfnudsgsnzgucnINxIYGBZCnunzguINcgnxzuyuygcusdygsdgfsdngcuicuycnuivzivnuxxnuk')
 ```

とやっていて,以下のように表示させていました.

print('mdashfsaohcxzinhcnisdhvnisuhdfnudsgsnzgucnINxIYGBZCnunzguINcgnxzuyuygcusdygsdgfsdngcuicuycnuivzivnuxxnuk')

色分けされているのはいいんですが,自動で折り返されることによって,見づらくなる場合があります. そこで以下の方法を見つけました.

見つけた新しいやり方

Python - PythonでServerから戻ってきたjson文字列を読むとエラーになりました。|teratail で,コードは<code>タグで囲ってくださいねっという文から,ヒントを得て,

<pre class="language-Python"><code class="language-Python hljs" data-language="Python">
print('mdashfsaohcxzinhcnisdhvnisuhdfnudsgsnzgucnINxIYGBZCnunzguINcgnxzuyuygcusdygsdgfsdngcuicuycnuivzivnuxxnuk')
</code></pre>

というように,コードを<pre class="language-Python"><code class="language-Python hljs" data-language="Python"></code></pre>で囲んでみました.すると,


print('mdashfsaohcxzinhcnisdhvnisuhdfnudsgsnzgucnINxIYGBZCnunzguINcgnxzuyuygcusdygsdgfsdngcuicuycnuivzivnuxxnuk')

という風に,コードが折り返されずに,スクロールバーが自動で付きました. しかし,シンタックスハイライトでしたっけ?,コードに色がつかなくなりました. それはそれで見づらい... なら組み合わせればいいじゃんっとなるかもしれませんが,組み合わせると,今までのように折り返されることになり,組み合わせられないですね.
ぷらすで,

<blockquote>

</blockquote>

> 

は同じで,引用を示すことになります.

次の手

以上の方法だと,どっちもかける要素があって見にくい...ググると,色々やり方が見つかるけど,はてなブログに適用できるのか?

konoti.com unitopi.com www.cg-method.com

とりあえず,上記サイトにあるようにPrism.jsとPrism.cssをダウンロード. これをどうやってはてなブログに適用するか...
そこで,以前やったcssの変更↓を思い出し, kusoimox.hatenablog.jp 同じように,はてなブログの”デザイン”のcssに,ダウンロードしたPrism.cssを追加で書いてある部分の下にコピペ. すると,コードのデザインがちょっと変わった. これで,外部参照じゃなくてもイケることが分かった.
しかし,シンタックスハイライトを適用させるには,Prism.jsを読み込ませる必要がある... そこで以下を参照.

qiita.com

cssと同じような手順で,はてなブログの”デザイン”→”ヘッダ”→”タイトル下”の記述できる部分に,

<script type="text/javascript">
Prism.jsの中身をここにコピペ(メモ帳とかで開いて)
</script>

をコピペし,デザインを適用させると,シンタックスハイライトが適用された! これで外部参照せず,元のデザインをいじることなく,コード部分だけを変更することができたっぽい.