diff --git a/example/example.md b/example/example.md index 82e9a4f..eb10948 100644 --- a/example/example.md +++ b/example/example.md @@ -6,32 +6,27 @@ twitter_id: abap34 github_id: abap34 mail: abap0002@gmail.com 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! @@ -39,16 +34,22 @@ 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を使ってユーザのブラウザ上で完結しています。** @@ -56,26 +57,21 @@ out=example/helloalmo/out/*.txt 具体的には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,8 +137,7 @@ matplotlib ::: ``` -と書くと、 `numpy`, `scipy`, `matplotlib` を読み込むことができます。 -(実行可能コードブロックの初回実行時に読み込まれます。) +と書くと、 `numpy`, `scipy`, `matplotlib` が `import` 可能になり、コードに含めることができます。 :::loadlib numpy @@ -117,7 +145,12 @@ 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) \ No newline at end of file