カテゴリー: WordPress

投稿日:

Markdown+WordPress+KaTeX

WordPressでTeXコードによる数式表示を実現するには
Markdownを使えるようにするプラグインをインストールすればいい
ただ他のプラグインとの関係など実際にインストールして使ってみないと使い勝手がわからない
私が選んだのは

WP Editor.md

スクリーンショット 166

KaTeXのセッティングをすればMarsEditの中にLaTeXコードを作文できる
スクリーンショット 169

MarsEdit

MarsEditで本投稿を作文しているところ
スクリーンショット 168

$$\frac{2x}{\sqrt{\pi}}-\frac{2x^3}{3\sqrt{\pi}}+\frac{x^5}{5\sqrt{\pi}}-\frac{x^7}{21\sqrt{\pi}}+\frac{x^9}{108\sqrt{\pi}}+\operatorname{O}\left(x^{10}\right) $$
\frac{2x}{\sqrt{\pi}}-\frac{2x^3}{3\sqrt{\pi}}+\frac{x^5}{5\sqrt{\pi}}-\frac{x^7}{21\sqrt{\pi}}+\frac{x^9}{108\sqrt{\pi}}+\operatorname{O}\left(x^{10}\right) 
$$\zeta(2)=\sum_{n=1}^{\infty}\frac{1}{n^2}=\prod_{p:prime}\frac{1}{1-\frac{1}{p^2}}$$
\zeta(2)=\sum_{n=1}^{\infty}\frac{1}{n^2}=\prod_{p:prime}\frac{1}{1-\frac{1}{p^2}}
投稿日:

Jupyter Notebook+WordPress+MarsEdit

Jupyter Notebook hoge.ipynbをWordPressに貼り付ける手順

準備　外観→追加CSSに以下を追記

Web上にはいくつかのCSSが見つかる
その中から選んだCSS
https://andrewchallis.co.uk/articles/php-nbconvert-a-wordpress-plugin-for-jupyter-notebooks/

************** Jupyter Notebook CSS ************************/
div .dataframe {
  border:none;
  margin: 0 auto;
}
div.output_stdout pre {
  max-height:300px;
}

div.output_stderr pre
{
  background: #fdd;
  margin:0;
  max-height:300px;
}
div.hl-ipython3 pre {
  margin:0
}
.dataframe thead tr:only-child th {
  text-align: right;
  text-transform: capitalize;
}
.dataframe thead th {
  text-align: left;
}
.dataframe tbody tr th {
  vertical-align: top;
}

.rendered_html tbody tr:nth-child(odd),
.rendered_html tbody tr:nth-child(odd) td {
  background: #f5f5f5;
}
.rendered_html tr, .rendered_html th, .rendered_html td {
  text-align: right;
  vertical-align: middle;
  padding: 0.5em 0.5em;
  line-height: normal;
  white-space: normal;
  max-width: none;
  border: none;
}
div.highlight .kn, .n, .k, .nn, .s1, .ow, .p, .mi, .c, .mf, .nb, .kc, .sd, .nf {
  font-family: monospace;
  font-size:14px;
}
.input_prompt {
  color: #303F9F;
  font-weight: bold;
  float: left;
  margin-right: 5px;
  margin-top: 3px;
}
.input_area pre {
  border: 1px solid #cfcfcf;
  border-radius: 2px;
  background: #f7f7f7;
  line-height: 1.21429em;
  padding: 6px 3px 6px 6px;
}
.output_prompt{
  color:#cc0000;
  font-weight: bold;
}
.prompt{
  font-family: monospace;
  font-size: 14px;
}
.c, c1 {
  color: #408080;
  font-style: italic;
}
.k {
  color: #338822;
  font-weight: bold;
}
.kn {
  color: #338822;
  font-weight: bold;
}
.mi {
  color: #008800;
}
.mf {
  color: #008800;
}
.o {
  color: #9966ff;
}
.ow {
  color: #BA22FF;
  font-weight: bold;
}
.nb {
  color: #338822;
}
.n {
  color: #000000;
}
.s, .s1, .sd, .s2 {
  color: #cc2222;
}
.se {
  color: #cc2222;
  font-weight: bold;
}
.si {
  color: #C06688;
  font-weight: bold;
}
.nn {
  color: #4D00FF;
  font-weight: bold;
}
.output_area pre {
  background-color: #FFFFFF;
  padding-left: 5%;
}
.code_cell {
  padding-left: 1%;
}
.cell {
  margin-top: 10px;
  margin-bottom: 10px;
}
br {
  line-height: 2;
}
blockquote {
  font-size: 1em;
  text-align: left;
  font-weight: normal;
}
code {
  border: none;
  box-shadow: none;
  font-family: monospace;
}
div.rendered_html h1, h2, h3, h4 {
  margin-top: 30px;
  margin-bottom: 10px;
}
div.rendered_html p a {
  color: #4D00FF;
}

スクリーンショット 165

1. hoge.ipynb から hoge.html を生成

$ jupyter nbconvert --to html --template basic hoge.ipynb
[NbConvertApp] Converting notebook hoge.ipynb to html
[NbConvertApp] Writing 5129 bytes to hoge.html

2. hoge.html の中身をMarsEditにコピー

ここでhoge.htmlをWORDPRESSエディター上カスタムHTMLにコピーする方法を試してみると、TeXコード部分が変換されずそのままで表示されてしまう。

出力

In [12]:
# フィボナッチ数列の一般項 F_n
# F_0 = 0,  F_1 = 1
# F_{n+2} = F_n + F_{n+1} n=0,1,2,...
In [13]:
import sympy
sympy.init_printing()
sympy.var("n")
A = sympy.Matrix([[1, 1],[1, 0]])
f1 = sympy.Matrix([1, 0])
Fn = sympy.simplify(A**(n-1)*f1)
display(Fn)
print("F_n =")
display(Fn[0,0])  # F_n = Fn[0,0]
$\displaystyle \left[\begin{matrix}\frac{2^{- n} \left(- \left(1 – \sqrt{5}\right)^{n} + \frac{2 \sqrt{5} \left(1 – \sqrt{5}\right)^{n}}{5} – \frac{2 \sqrt{5} \left(1 + \sqrt{5}\right)^{n}}{5} + \left(1 + \sqrt{5}\right)^{n}\right)}{-2 + \sqrt{5}}\\- \frac{2 \sqrt{5} \left(1 – \sqrt{5}\right)^{n}}{5 \left(- 2^{n} \sqrt{5} + 2^{n}\right)} + \frac{2 \sqrt{5} \left(1 + \sqrt{5}\right)^{n}}{5 \left(2^{n} + 2^{n} \sqrt{5}\right)}\end{matrix}\right]$ 
F_n =
$\displaystyle \frac{2^{- n} \left(- \left(1 – \sqrt{5}\right)^{n} + \frac{2 \sqrt{5} \left(1 – \sqrt{5}\right)^{n}}{5} – \frac{2 \sqrt{5} \left(1 + \sqrt{5}\right)^{n}}{5} + \left(1 + \sqrt{5}\right)^{n}\right)}{-2 + \sqrt{5}}$
In [14]:
for i in range(10):
    print(int(Fn[0,0].subs(n, i)))

0
1
1
2
3
5
8
13
21
34
In [ ]:
投稿日:

WordPress コードの書き方

本ブログのコードは以下のようにして書いています

■ブロックのカスタムHTMLの書き方

記述のポイント
<div class="hcb_wrap">　プラグイン Highlighting Code Block 使用
<p class="prism-title">prime3time.py</p>　左上にファイル名prime3time.py表示
<pre class="prism line-numbers language-python ">
　prism 独自カラーリングファイル・独自prism.js
　line-numbers　行ナンバー表示
　language-python　右上に言語名python表示

<code>コード</code>

<code>
コード
</code>
とかかないこと

<code>import time
…
 print(f'計算にかかった時間{t}秒')</code></pre>
</div>
のように書き始め、書き終わる
<div class="hcb_wrap">
<p class="prism-title">prime3time.py</p>

<pre class="prism line-numbers language-python "><code>import time
n = int(input('素数判定したい3以上の自然数nを入れてね n='))   # 入力されたnを整数に変換
start = time.time()                       # 時間計測開始
p = 0                                     # 約数の個数カウンター
for k in range(1,n+1):                    # k=1,...,n
	if n % k == 0:                        # n÷kの余りが0ならば
		print(f'{n} は {k} を約数にもつ')   # 約数kを表示
		p = p + 1                         # 約数の個数カウンターpを+1
if p > 2:                                 # 約数の個数が3以上の場合
	print(f'{n} は約数を{p}個もつ合成数で素数ではない')    # 素数ではない
	t = time.time() - start               # 時間計測終了
	print(f'計算にかかった時間{t}秒')
else:                                     # そうでない場合（p=2）
	print(f'{n} は素数！')                 # 素数
	t = time.time() - start
	print(f'計算にかかった時間{t}秒')</code></pre>
</div>

prime3time.py

import time
n = int(input('素数判定したい3以上の自然数nを入れてね n='))   # 入力されたnを整数に変換
start = time.time()
p = 0    # 約数の個数カウンター
for k in range(1,n+1):   # k=1,...,n
	if n % k == 0:       # n÷kの余りが0ならば、（kはnの約数ならば）
		print(f'{n} は {k} を約数にもつ')    # 約数kを表示
		p = p + 1        # 約数の個数カウンターpを+1
if p > 2:                # for文を抜け出した後 約数の個数で条件分岐 2個よりも大きい場合には
	print(f'{n} は約数を{p}個もつ合成数、素数ではない')    # 合成数
	t = time.time() - start
	print(f'計算にかかった時間{t}秒')
else:                    # そうでない場合（p=2）
	print(f'{n} は素数！')         # 素数
	t = time.time() - start
	print(f'計算にかかった時間{t}秒')

プラグイン＋追加CSS

p.prism-title {
 background: #333333;
 font-size: 90%;
 display: inline-block;
 color: #ffff00;
 letter-spacing: 0.1em;
 margin: 0px 0px;
 padding: 3px 15px 3px 15px;
 border: 0px solid #f5f2f0;
 border-radius: 1px 5px 0px 0px;
 position: relative;
 top: 2px;
 z-index: 100;
}