example をアップデート

example/example.md

@@ -6,76 +6,72 @@ twitter_id: abap34
 github_id: abap34
 mail: [email protected]
 ogp_url: https://www.abap34.com/almo_logo.jpg
-tag: ["ALMO", "Python", "Markdown", "Pyodide", "WebAssembly"]
+tag: [ALMO, Python, Markdown, Pyodide, WebAssembly]
 author: abap34
 url: abap34.com
 site_name: abap34.com
 twitter_site: abap34
 ---
 
+
 ## はじめに
 
+### Meet ALMO!
 
-ALMOは拡張Markdownパーサです。
+ALMOは拡張Markdownパーサ / 静的サイトジェネレータ です。 入力として Markdownファイルを受け取り、単一の HTMLファイルを出力します。
 
-ALMOの拡張構文の最大の特徴、そして売りは、**実行・ジャッジ可能なコードブロック**です。
+ALMOの拡張構文の最大の特徴は、 **実行環境を含むページを作成できる** ことです。
 
 下にいかにも入力可能そうなエディタと、ボタンがあります。
 
 そこに、入力を受け取って、 `Hello {入力された文字列}!` という文字列を出力するPythonのプログラムを書いてみましょう。
 
-ちなみに、
-
-- 入力は`input()`
-- 文字列結合は`+`
-- 出力は`print()`
-
-でできます。
-
+(Pythonの文字列結合は `+` でできます。)
 
 :::judge
 title=Hello ALMO!
 sample_in=example/helloalmo/in/sample.txt
 sample_out=example/helloalmo/out/sample.txt
 in=example/helloalmo/in/*.txt
 out=example/helloalmo/out/*.txt
+source=example/input.py
 :::
 
 
+
+コードができたら、下のボタンでジャッジをしてみましょう！
+
+
 ボタンの
 - "Run Sample" ボタンでサンプルに対して実行
-- "Submit" ボタンで複数のテストケースでジャッジ
+- "Submit" ボタンで複数のテストケースでテスト
+
+ができます。 ACを目指してコードを変更してみましょう！
 
-ができます。
 
-このPythonの実行は、サーバーで実行されているのではなく、
+さて、このPythonの実行は、サーバーで実行されているのではなく、
 
 **WebAseemblyを使ってユーザのブラウザ上で完結しています。**
 
 
 具体的にはALMOは、[Pyodide](https://pyodide.org/en/stable/) を使ってブラウザ上でPythonのコードを実行しています。
 
 
-また、ジャッジコードもALMOに組み込まれていて、全ての処理がブラウザ上で完結しています！
+また、ジャッジを行うコード・テストケースも、全て HTMLファイルに埋め込まれていて、
+全ての処理がクライアント側で完結しています。
 
 (つまり一度読み込みさえ終わればオフライン環境でも動作します。)
 
 
-上のブロックは
+## ALMOの機能
 
-```text
-:::judge
-title=Hello ALMO!
-sample_in=example/helloalmo/in/sample.txt
-sample_out=example/helloalmo/out/sample.txt
-in=example/helloalmo/in/*.txt
-out=example/helloalmo/out/*.txt
-:::
-```
+### キホンのキ
+
+ALMO は、競技プログラミング・データ分析・科学技術計算などのプログラミングに関連する記事を
+簡単に執筆できるように設計されています。
 
-と書くだけで作られ、そして全ての出入力ファイルがHTMLファイルに埋め込まれて、自動でジャッジが構築されます。
+通常の Markdown記法のようにコードブロックを作ることもで画像を表示することもできますし、
 
-普通のコードブロックも作れます、
 
 ```python
 def hello():
@@ -85,20 +81,53 @@ if __name__ == "__main__":
     hello()
 ```
 
-ジャッジなしで、実行可能なコードブロックも書けます！
-
+![マンドリル](https://imagingsolution.net/wordpress/wp-content/uploads/2011/03/Mandrill.png)
 
+単に実行可能なコードブロックも書くことができます。
 
 :::code
-# このコードは自分自身を出力します！　
+def kuku():
+    print('+----' * 9 + '+')
+    for i in range(1, 10):
+        row = '|'
+        for j in range(1, 10):
+            row += '{:3d} |'.format(i * j) 
+        print(row)
+        print('+----' * 9 + '+')
+
+kuku()
+:::
+
+
+また、デフォルトテーマでは証明などの環境や注意・警告などのブロックもサポートされており、もちろんカスタマイズ可能です。
+
+:::definition
+
+関数列 $\{f_n\}$ が各点収束するとは、任意の $x$ に対して $\displaystyle \lim_{n \to \infty} f_n(x)$ が存在することである。
 
-# 実行して確かめよう
+つまり、
+
+$$
+\forall \varepsilon > 0, \forall x \in X, \exists N \in \mathbb{N}, \forall n \geq N, |f_n(x) - f(x)| < \varepsilon
+$$
+
+が成り立つことである。
+
+
+:::warning
+ここで、 $N$ は 各 $\varepsilon, x$ に対してとってこれることに注意しよう。
+
+各 $\varepsilon$ に対してある $N$ が存在して、 各 $x$ に対して $n \geq N$ ならば $|f_n(x) - f(x)| < \varepsilon$ が成り立つときは、
+関数列 $\{f_n\}$ は **一様収束する** という。
+
+:::
 
-_='_=%r;print(_%%_)';print(_%_)
 :::
 
 
-さらに、主要なPythonのライブラリも読み込めます。
+### ライブラリの読み込み
+
+さらに、主要なPythonのライブラリも実行環境に読み込ませることが可能です。
 
 ```
 :::loadlib
@@ -108,16 +137,20 @@ matplotlib
 :::
 ```
 
-と書くと、 `numpy`, `scipy`, `matplotlib` を読み込むことができます。
-(実行可能コードブロックの初回実行時に読み込まれます。)
+と書くと、 `numpy`, `scipy`, `matplotlib` が `import` 可能になり、コードに含めることができます。
 
 :::loadlib
 numpy
 scipy
 matplotlib
 :::
 
-これを使ってバネの運動を調べてみましょう。(generated by ChatGPT)
+### matplotlibのサポート
+
+`matplotlib` を使ったプロットをサポートしています。
+
+事前に `matplotlib` を読み込んでおいて、 `matplotlib.use("module://matplotlib_pyodide.html5_canvas_backend")` を追加すると、
+通常のように `plt.show()` とするだけで、ブラウザ上でプロットを表示することができます。
 
 :::code
 import matplotlib.pyplot as plt
@@ -161,16 +194,10 @@ plt.legend()
 plt.title('弾性振動子の振動')
 plt.grid(True)
 plt.show()
-
 :::
 
 
-もちろん通常の画像をはじめとして基本的なマークダウン記法をサポートしています。
-
-![マンドリル](https://imagingsolution.net/wordpress/wp-content/uploads/2011/03/Mandrill.png)
-
-
-## インストール方法・使い方
+## インストール
 
 ALMOは、Homebrewを使ってインストールすることができます。
 
@@ -185,8 +212,21 @@ brew install almo
 almo example/example.md -o example.html
 ```
 
-全部入りのHTMLファイルなので、そのまま置くだけで動作します。
-
 記法の詳細については [レポジトリのREADME.md](https://github.com/abap34/ALMO)を参照してください。
 
+## ライブラリ
+
+### 1. Visual Studio Codeでのプレビュー [https://github.com/abap34/ALMO-extension](https://github.com/abap34/ALMO-extension)
+
+Visual Studio Code上で、執筆中の記事のプレビューが可能です.
+
+
+![](https://github.com/abap34/ALMO-extension/raw/main/assets/almo-ext-demo.gif)
+
+
+### 2. GitHub Pages へのデプロイ [https://github.com/abap34/ALMO-blog-template](https://github.com/abap34/ALMO-blog-template)
+
+
+GitHub Pages を使って、簡単にブログを構築することができます。
 
+![](https://github.com/abap34/ALMO-blog-template/raw/main/assets/index-example.png)