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 ]
なかなか上手く行かなくてあせりました・・・
とりあえずできたので忘備録として残します。
埋め込みの順番
まず初めに、「編集モード」を変えます。
記事画面の左上の部分で変更できます。その矢印を押すとモードが下に並んで出てきます。
はてな記法を選択してページを開きます。
画面左上が「編集はてな記法」に変更されていればOK。
コードを書いていきます。
例えば
>|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;
}
background-color: #282a36;
color: #ffffff;
}
行番号の付け方
行番号の表示ですが、以下の記事以外の方法ではうまくいきませんでした。
本当に助かりました。ありがとうございます。
デザインCSSでは縦線のコードを使用させて頂きました。
ソースコードの文字サイズ
デザインCSSに以下のように入力しました。
pre.code {
font-size:70%;
}
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;
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;
はてな記法で書くのは難しいです・・・
もっと簡単にできる方法がないか探しています。