KaTeX コードを静的にレンダリングする

Posted on 日 28 4月 2019 in 運用 • Tagged with KaTeX, Pelican, ブログ, Python, Node.js, JavaScript

ふと, KaTeX ってサーバサイドレンダリングできないかと思って試してみたら,普通に楽にできそうだったので,ブログでやってみることにした.

KaTeX をサーバサイドレンダリングする

特に難しいことはなくて, KaTeX は Node.js 上で動くっぽく,以下のようにすれば HTML を生成できるっぽい:

$ node --eval 'const KaTeX = require("katex"); console.log(KaTeX …

Continue reading

MathML にバイバイして, KaTeX に移行した

Posted on 日 21 4月 2019 in 運用 • Tagged with Pelican, MathML, ブログ, reStructuredText, JavaScript, CSS

以前ブログで数式環境を, MathML と MathJax で導入した.ただ色々敗北したので KaTeX を使うことにした.その備忘録.

MathML に敗北した

正確には, MathML は悪くないんだが,現状の MathML + MathJax 環境は色々辛いものがあった.

  • \mathit\mathrel などの基本的なコマンドに対応していない.
  • MathJax のレンダリングが遅い.
  • MathJax …

Continue reading

脚注のためのツールチップ追加

Posted on 月 15 4月 2019 in 運用 • Tagged with ブログ, Pelican, JavaScript, CSS

脚注をツールチップで見れるようにしたので,それについて.

reStructuredText の脚注

reStructuredText では脚注が使える.これは,以下のように書けばいい:

some text[#footnote-ref]_ .

.. [#footnote-ref] some footnote content.

こうすると,自動でナンバリングが行われ,それぞれ脚注へのリンクと元の文書へのバックリンクが生成される.分かりづらいがバックリンクは,数字の部分に当てがわれ,それをクリックすることで戻れる.ただ,これをクリックするのがめんどかったので,ツールチップで表示してみることにした …


Continue reading

ブログの overflow 時のスタイル設定を見直す

Posted on 月 15 4月 2019 in 運用 • Tagged with Pelican, ブログ, CSS

ブログの CSS で,幅がはみ出るような要素のスタイルを幾つか修正したので,その対応記録.

経緯

うちのブログではタイプライタ体や数式をよく使う.これは僕がプログラミングと数学寄りの記事を良く書くからだけど,ちょっと問題も起きていた.パソコンでの閲覧時はそれほど大きな問題にはならないんだが,スマフォなどの画面幅が短いモバイル端末ではタイプライタ体の文字が画面幅からはみ出て表示されて,閲覧の快適さがあまりなかった (誰から言われたとかではなく,単に僕が見る時不便だと感じていた).

問題となっていた要素は,以下のもの:

インラインリテラル
``inline literal`` で書けるやつ.プログラム片とかを書くのに使っていて, tt タグを使って変換される.
数式

以下の記法で書けるやつ …


Continue reading

MathML で数式を表示する

Posted on 日 14 4月 2019 in 運用 • Tagged with Pelican, MathML, ブログ, reStructuredText, MathJax, JavaScript

reStructuredText は数式表示に対応している.ただデフォルトのレンダリング表示がいまいちだったので,ちょっといじった.その備忘録.

math ディレクティブと docutils の設定

reStructuredText には math ディレクティブというものが標準で搭載されていて [1]TeX の記法を使って以下のように数式が埋め込める:

.. math::

  \forall a, b \in \mathbb{N}.\, a \leq …

Continue reading

sitemap の追加

Posted on 水 10 4月 2019 in 運用 • Tagged with SEO, ブログ, Pelican, Google Analytics

sitemap とかを追加してみたので,それの備忘録.

sitemap 周辺ファイルの追加

まず Pelican で sitemap を生成させる.これは sitemap プラグインを追加するだけでいい:

1
2
3
4
  PLUGINS = [
    ...
+   'sitemap',
  ]

後は SITEMAP に設定を書く.以下の感じのことを書いた:

SITEMAP = {
  'format' …

Continue reading

Google Analytics の導入

Posted on 月 08 4月 2019 in 運用 • Tagged with Pelican, ブログ, Google Analytics, SEO

Google Analytics を導入したので,やったことをまとめた.

トラッキング ID の設定

既に Analytics のアカウントは持っていたので,そのアカウントのプロパティを追加してトラッキング ID を入手するだけ.以下の手順を行うだけだった:

  1. https://analytics.google.com/analytics の管理ページ表示
  2. 「プロパティを作成」ボタンを押す.
  3. プロパティの項目を埋めていく.大体以下の感じ:
    • ウェブサイトの名前 …

Continue reading

ブログに共有ボタンを追加した

Posted on 木 04 4月 2019 in 運用 • Tagged with Pelican, ブログ, Python, JavaScript

ブログに共有ボタンを追加して, JavaScript を呼べるようにした.

導入までの経緯

Pelican には CSS を追加する仕組みはあるが, JavaScript を追加する仕組みはない.なので,テーマで対応していない JavaScript を使う機能は入れられない.これでは不便なので, JavaScript を無理やり追加することにした.

また,共有ボタンも現状テーマで対応していないため,無理やり JavaScript で追加することにした.静的に埋め込むこともできるのだが,どうせ JavaScript …


Continue reading

ブログのデザイン調整

Posted on 月 01 4月 2019 in 運用 • Tagged with Python, Pelican, ブログ, CircleCI

ブログの改良をちょっと色々やってたので,そのご報告.

Circle CI での謎の警告解消

今まで Circle CI 上だと以下の警告が出てた:

WARNING: Locale could not be set. Check the LOCALE setting, ensuring it is valid and available …

Continue reading

ブログ始めました

Posted on 日 31 3月 2019 in 運用 • Tagged with Python, Pelican, ブログ, GitHub

色々あって,技術的なことを書くブログを始めようと思いました (まる) . 今までは, Advent Calendar の時期だけ Qiita に記事を書いてたりしたんですが, ちゃんとしてないやつも書いていこうかなってことで.

ちゃんとした系の記事は,出来るだけ外部に出していこうと思いますが, 調査不足だったり,よく分からない系とか徒然なるままな感じのことだったりとか,あと主に自分のためにしたこととかを書いていこっかなって感じです.

で,早速ですが一応ブログ立てたんで,立てる際した事とかを書いていく.

サイトジェネレータの選定基準

まず,ブログに使うサイトジェネレータどうしよっかなあと悩んでいた.サイトジェネレータ一覧人気順は, https://www.staticgen …


Continue reading