大切なものは、見えるところに。

乳がんかな?と疑い始めてからの日々を、振り返りながら、ゆるやかに綴ります。

Pythonもはてなブログも初心者|ソースコードの埋め込み、背景色、言語表示、行番号〜2023.06時点でうまくいった方法

以下のような、ソースコード埋め込みですが


import itertools
from itertools import chain, combinations
pair_list = [
             list(itertools.combinations(n, 2))
             for n in corpus if len(corpus) >=2
             ]


なかなか上手く行かなくてあせりました・・・

とりあえずできたので忘備録として残します。



埋め込みの順番

① 編集モードを「編集見たまま」から「編集はてな記法」へ変更。

②コードを以下の様式で記入。
  >| python | コードはここに書きます | | <

③ プレビューで確認



まず初めに、「編集モード」を変えます。
記事画面の左上の部分で変更できます。その矢印を押すとモードが下に並んで出てきます。




はてな記法を選択してページを開きます。
画面左上が「編集はてな記法」に変更されていればOK。


コードを書いていきます。

>|ここに言語(python)|
ここにソースコード
||<



例えば

>|python|

import itertools

from itertools import chain, combinations

pair_list = [

list(itertools.combinations(n, 2))/p>

  for n in corpus if len(corpus) >=2

    ]

||<

と入力したら


import itertools

from itertools import chain, combinations

pair_list = [

             list(itertools.combinations(n, 2))

             for n in corpus if len(corpus) >=2

             ]

このように表示されると思います。


コードの背景色が黒色になっています。
色指定はデザインCSSに以下のコードを貼り付けます

.entry-content pre.code {
background-color: #282a36;
 color: #ffffff;
}


行番号の付け方

行番号の表示ですが、以下の記事以外の方法ではうまくいきませんでした。

note.z0i.net

本当に助かりました。ありがとうございます。

デザインCSSでは縦線のコードを使用させて頂きました。


ソースコード文字サイズ

デザインCSSに以下のように入力しました。

pre.code {
font-size:70%;
}



コードの左上に言語名(pythonなど)を表示させるために
デザインCSSに以下のように入力しました。

pre.code:before {
width: 99%;
content: attr(data-lang);
display: inline-block;
background: #454545;
color: #fff;
padding: 0.5px 0px;
padding-left: 1%;
border-radius: 4px 4px 0 0;
position: absolute;
margin-left: -10px;
margin-top: -30px;


はてな記法で書くのは難しいです・・・
もっと簡単にできる方法がないか探しています。