田口健太のページ/html テンプレート

Validator

HTML/CSS (など?) のコードが最新の規約に従っているか調べる。リンクはこちら。

HTML を画像に変換してくれる Linux コマンド

AAVSO の LCG のような特殊なサイトは中々上手く変換してくれないが。

wkhtmltopdf。apt-get で入手可能。
- wkhtmltopdf: error while loading shared libraries: libQt5Core.so.5: cannot open shared object file: No such file or directory というエラーが出る場合、sudo strip --remove-section=.note.ABI-tag /usr/lib/x86_64-linux-gnu/libQt5Core.so.5 を行うと良い (こちらやこちらを参照)
monolith: sudo snap install monolith でインストールできる。
htmldoc: apt-get 可能。

HTML を用いて記号/数値を書く方法

参考文献:

実体参照符号/実体参照文字

文字	記法
&	&
<	<
>	>
"	"
{	{
}	}
(	(
)	)
[	[
]	]
α	α
−	−
±	±
×	×
À	À
Á	Á
Â	Â
Ã	Ã
Ä	Ä
ß	ß
Ą	&Aogon;
Ā	&Amacr;
Š	&Scaron;
Ă	&Abreve;
&Adot; (Ȧ)	&Adot;
&Aacgr; (Ά)	&Aacgr;

「&」、「<」、「>」、「"」に関しては、必ず上記の記法を使うこと (これら4文字は HTML で記号を表す時などで必須。全てのブラウザでこれらの文字は上記記法でエスケープできるようになっている)
括弧のエスケープ文字も存在する。
- 使い道としては、例えば Emacs で HTML ファイルに「([)」などと書いた時に、「Mismatched parentheses」と出てしまうことがあるが、「([)」と書けばそういう怒られが発生しなくなる、とかだろうか?
- ちなみに「「{」、「}」は CSS でよく使う。
- 「(」、「)」は Javascript などでよく使う。
ギリシャ文字などについても、色々エスケープが可能。覚えておけば便利。
Ångström (Å, オングストローム) については、"Å" ではなく "Å" で表示させる (Validator に怒られてしまうため。なお、Unicode では Å は勝手に Å に置換されるらしい)。
こちらも参考になるかも。

上付き/下付き

上付き文字は <sup></sup> タグで、下付き文字は <sub></sub> タグで囲うことで出力できる。

表テンプレート

元となった表については単位系のページ参照 (今回はセルをつなげる例を表現するために、少しアレンジしている)。

~~下記サンプルの <table> タグの部分で余白などを調整しているので、ここが重要である (個別の表の左詰めなどについては適宜調べる)~~
<table style="text-align:center;" border="1" cellpadding="5" cellspacing="0"> などすれば余白などの調整が、<td aligh="left"> とすると左詰めが、それぞれできるのだが、Validator に怒られてしまう。そのため、こうしたオプションは CSS に記述するようにしよう。

入力:

<table>
  <tr>
    <td>単位系</td>
    <td>$\lambda$</td>
    <td>$\gamma$</td>
  </tr>
  <tr>
    <td>SI</td>
    <td colspan="2">1</td>
  </tr>
  <tr>
    <td>Gauss</td>
    <td>4&pi;</td>
    <td rowspan="2">c</td>
  </tr>
  <tr>
    <td>Heaviside-Lorentz</td>
    <td>1</td>
</table>

出力:

単位系 $\lambda$ $\gamma$

SI 1

Gauss 4π c

Heaviside-Lorentz 1

表示/非表示ボタンテンプレート

(2022/3/4 全面改訂)
以下の Javascript ソースを読み込ませるようにした。

Javascript ソース

html への導入例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>ボタンのテスト</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <script src="http://www.kusastro.kyoto-u.ac.jp/~kentagch/settings/show_button.js"></script>  <!-- ボタンの埋め込み -->
    <main>
      <h4>動作の例 (押すとボタンの解説が出てくる): <input id="button_test" type="button" style="WIDTH:80px" value="表示" onClick="showbutton('button_test', 'button_test_text')"></h4>
      <div id="button_test_text" style="display:none">
	表示されたり消えたりする文章。
	<br>
	&lt;input&gt; タグにより、html 内にボタンを挿入する。
	<br>
	表示させたり消したりさせる文章を &lt;div&gt; タグ内に記述している。
	<br>
	&lt;input&gt; タグの onClick 以下が、ボタンが押された時に実行される動作である (このボタンの場合は showbutton 関数が実行される)。
	<br>
	showbutton 関数の引数に、ボタン自身の &lt;input&gt; タグの id と、表示されたり消したりさせる文章の &lt;div&gt; タグの id を与える。
      </div>
    </main>
  </body>
</html>

動作の例 (押すとボタンの解説が出てくる):

Google Code Prettify を用いたソースコードの表示

これを用いると、HTML 内部で様々な言語のソースコードを簡単に表示させることができる

参考文献

Google Code Prettify の読み込み

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=c&skin=sunburst"></script>

などとすると読み込むことができる

URLクエリパラメータ	デフォルト	説明
lang	none	読み込みたい言語ハンドラを指定する (通常はその言語のファイル拡張子)。複数回指定する (例: ?lamg=html&lamg=c) こともできるが、特に指定しなくても (?lang=none) 問題なく読み込んでくれることが多そうだ。
skin	none	テーマを指定できる。詳しくは Gallery of themes for code prettify を参照

Google Code Prettify の使い方

修飾したいコードを <pre> や <code> で囲い、その class に prettyprint を追加する (言語を指定する場合は lang-c なども一緒に指定する: 下記参照)。ただし、少なくとも「&」は「&」に、「<」は「<」に、「>」は「>」に、「"」は「"」にエスケープしておこう (しなくても上手く行く場合もあるが)。

ソース例 (<pre> タグはスペースに敏感なので、下記のようにインデントをずらして入力している):

	  <li>ソース例 (&lt;pre&gt; タグはスペースに敏感なので、下記のようにインデントをずらして入力している):
	    <pre class="prettyprint lang-c">
#include &lt;stdio.h&gt;
int main (void)
{
  printf(&quot;Hello World!\n&quot;);
  return 0;
}
</pre>
	  </li>

上記ソースを読み込んだ時の表示:

#include <stdio.h>
int main (void)
{
  printf("Hello World!\n");
  return 0;
}

代表的な言語

lang-bash, lang-csh, lang-sh, lang-c, lang-cpp, lang-css, lang-html, lang-js (or lang-javascript), lang-latex, lang-tex, lang-php, lang-py (or lang-python), lang-r (Fortran はあるのかな...) などをはじめ、たくさん用意されている。

その他

スクリプトとスタイルをダウンロードしてきて、自分で提供することもできるようだ (自分独自のスタイルも作れるみたいだ)。

MathJax (v3) を用いた数式の表示

MathJax を用いると、LaTeX みたいに数式を HTML で記述できる。

参考文献

MathJax の読み込み

他にも方法があるかもしれないが、以下のように行うと、MathJax (v3) を読み込むことができた:

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

MathJax の使い方

以下のように、普通に LaTeX のようにすればよい:
- 入力:
```
\begin{equation}
E = mc^2
\end{equation}
```
- 出力: \begin{equation} E = mc^2 \end{equation}
色々試してみたところ、gather, align なども使える (empheq は無理っぽかった)
行列の成分表示も通常通り array 環境で表現可能
ベクトルの太字は \bm は使えず、代わりに \boldsymbol を使う:
- 入力:
```
\begin{gather}
\text{div}\boldsymbol{D} = \rho
\\
\text{rot}\boldsymbol{H} - \frac{\partial\boldsymbol{D}}{\partial t} = \boldsymbol{j}
\\
\text{div}\boldsymbol{B} = 0
\\
\text{rot}\boldsymbol{E} + \frac{\partial\boldsymbol{B}}{\partial t}= \boldsymbol{0}
\end{gather}
```
- 出力: \begin{gather} \text{div}\boldsymbol{D} = \rho \\ \text{rot}\boldsymbol{H} - \frac{\partial\boldsymbol{D}}{\partial t} = \boldsymbol{j} \\ \text{div}\boldsymbol{B} = 0 \\ \text{rot}\boldsymbol{E} + \frac{\partial\boldsymbol{B}}{\partial t}= \boldsymbol{0} \end{gather}

その他

マクロを使えば自作コマンドが作れるらしい (\bm とか作ってみたいなぁ)
同じく Javascript の調整で表示場所を左に寄せるなども可能になる

単位系	$\lambda$	$\gamma$
SI	1
Gauss	4π	c
Heaviside-Lorentz	1	c