シンタックスハイライト(構文強調)として、Prism.jsを試用してみる。
- Prism.js – https://prismjs.com/
<pre><code class="language-css line-numbers">...</code></pre>
とすると行番号が表示されるが、コード本体の行と行番号が微妙にずれてしまう。これを解決するため、以下のようにprism.css
を修正した。
/* prism.cssの冒頭部分 */
...
code[class*="language-"],
pre[class*="language-"] {
...
font-size: 1em; /* ←ここを'1rem'に変更 */
...
}
本ページでは実際にはfont-size: 0.9rem;
にしてある。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ページのタイトル</title>
</head>
<body>
<h1>サンプルHTML5ドキュメント</h1>
<p>ここにHTML5ドキュメントを記述します。</p>
</body>
</html>
CSS
/* CSSサンプル */
@charset "utf-8";
/* フォント */
body {
font-family: sans-serif;
}
.entry-title {
font-family: sans-serif;
}
h2 {
font-family: serif;
}
/* テーブルで「固定幅」を指定していないのに固定幅になってしまうバグを修正 */
.wp-block-table {
table-layout: auto !important;
}
/* アドレス */
address {
font-style: normal;
}
/* 最下部にサイト名と"Proudly powered by WordPress"を表示しないようにする */
.site-info {
display: none;
}
C
/* Cソースコードサンプル */
#include <stdio.h>
int main(void) {
int i;
int j;
for (i = 0; i < 11; i++) {
for (j = 0; j < 10; j++) {
const int v = i * 10 + j;
printf("\x1b[%dm%03d\x1b[0m ", v, v);
}
printf("\n");
}
return 0;
}
Python
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import sys
from myapp import MyApplication
# メイン
def main():
app = MyApplication()
exit_status = app.run(sys.argv)
sys.exit(exit_status)
if __name__ == '__main__':
main()
Bash – Shell
$ wget https://raw.githubusercontent.com/kou1okada/apt-cyg/master/apt-cyg
$ mv apt-cyg /usr/local/bin
(↑パッケージで管理されておらず、後で導入したのでlocalに入れた)
$ chmod +x /usr/local/bin/apt-cyg
Markdown
2019/10/12
MARKDOWN SAMPLE
===============
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut *labore et dolore* magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
* Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut **labore et dolore** magna aliqua.
* Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
## Item2
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur.
> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
> officia deserunt mollit anim id est laborum.
[Lorem ipsum dolor sit amet](http://example.com/)