Merge pull request #14 from abap34/inline-code-front

インラインコードのフロント側対応

example/example.md

@@ -1,72 +1,108 @@
 ---
-title:abap34
-data:0809
+title: ALMO デモページ
+date: 2023-08-10
+author: abap34
 ---
 
-# すごいマークダウン
-## H2
-### h3
-#### $a$
-##### *xxx*ff
-###### ~~fff~~
+# ALMO デモページ
 
-This is Awesome Markdown.
-めっちゃすごいマークダウンと、申します...
+## はじめに
 
-インラインの形式だよ。 
+ALMOは、拡張Markdownを受け取り実行 & ジャッジ環境同梱の単一のHTMLファイルを出力します。
 
-$x^2 + y^2 = z^2$ 
+ALMOは基本的なMarkdownのパーサの機能を内包していますが、
 
-とか
+ALMOの最大の特徴、そして売りは、**実行・ジャッジ可能なコードブロック**です。
 
-*traO*とか**xx**とか`a`とか`xxx`
+下にいかにも入力可能そうなエディタと、ボタンがあります。
 
-とか**野球部**ね。~~a~~
+そこに、
 
-- vector
-  - fff
-    - xx
-- array
-  - ネストできます`a`
-  - すごいね
-yaa
-- gg
+入力を受け取って、 `Hello {入力された文字列}!` という文字列を出力するプログラムを書いてみましょう。
 
-- ff
-## guo-
 
-*ff*
+なお、Pythonの標準入力は`input()`で受け取ることができます。
+文字列結合は`+`で行え、出力は`print()`で行えます。
 
-$$
-f*f := f\times f
-$$
 
-```
-int main() {
-    int a;
-    std::cin >> a;
-    std::cout << a << std::endl;
-}
-```
 
-[url](https://atcoder.jp/)
+:::code
+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
+:::
+
+
+
+
+プログラムが書けたら、"Run Sample"ボタンを押してみましょう。
+すると、「サンプルの入力」に対する実行結果が、「出力」に表示されます。
+
+ただしいプログラムが書けたら、"Submit"ボタンを押してみましょう。
+
+すると、複数のテストケースに対して正しい出力がなされているかチェックされます。
 
-f![xx](example/image/sum.png)
+無事に正しいコードが書かれていれば左上のステータスが"AC(Accepted)"となったはずです！
 
-インターネット上の画像をBas64でエンコードして埋め込むこともできます。
-![](https://www.abap34.com/assets/myicon-3ebaec7d.png)
 
+このように、ALMOはプログラムを書いて実行し、ジャッジすることができます。
+そして、この実行は、 **サーバー側ではなく、ユーザーのブラウザ側で完結しています。**
+
+ALMOは、[Pyodide](https://pyodide.org/en/stable/) を使ってブラウザ上でPythonのコードを実行することができます。
+
+また、ジャッジコードも組み込まれており、全ての処理がブラウザ上で完結しています！
+(つまり一度読み込みさえ終わればオフライン環境でも動作します.)
+
+そしてこのコードブロックは
+
+
+```
 :::code
-title=Sum Function
-sample_in=example/in/sample.txt
-sample_out=example/in/sample.txt
-in=example/in/*.txt
-out=example/out/*.txt
-judge=equal
+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
 :::
+```
+
+
+と書くだけで作ることができます。
+
+
+このような記述を含むMarkdownファイルをALMOに渡すだけで、ALMOは全ての入出力ファイルをHTMLファイルに埋め込んで、自動でジャッジが構築されます！
+
+つまり、ALMOは**「全部入り」のHTMLファイルを出力する**パーサです！
+(他にも、たとえインターネット上のファイルでも、画像は自動でBase64に変換され、HTMLファイルに埋め込まれます。)
+
+![マンドリル](https://imagingsolution.net/wordpress/wp-content/uploads/2011/03/Mandrill.png)
+
+
+
+## インストール方法・使い方
+
+ALMOは、Homebrewを使ってインストールすることができます。
+
+```
+brew tap abap34/homebrew-almo
+brew install almo
+```
+
+インストールが完了したら、MarkdownファイルをALMOに渡してみましょう。
+
+```
+almo example/example.md > index.html
+```
+
+結果は標準出力に吐かれるので、適宜リダイレクトしてください。
+
+HTMLファイルは単体で動作します！
+
+あとは自分のサイトに配置したり、配布して、ぜひ使ってください！
+
+記法の詳細については [レポジトリのREADME.md](https://github.com/abap34/ALMO)を参照してください。
+
 
 
-| **TOKYO** | 2 | 3 |
-|:---|:---:|---:|
-| *4* | **おい** |  9 |
-| 7 | 8 | 9 |

example/helloalmo/in/001.txt

@@ -0,0 +1 @@
+world

example/helloalmo/in/002.txt

@@ -0,0 +1 @@
+wasm

example/helloalmo/in/sample.txt

@@ -0,0 +1 @@
+ALMO

example/helloalmo/out/001.txt

@@ -0,0 +1 @@
+Hello, world!

example/helloalmo/out/002.txt

@@ -0,0 +1 @@
+Hello, wasm!

example/helloalmo/out/sample.txt

@@ -0,0 +1 @@
+Hello, ALMO!

src/render.hpp

@@ -816,7 +816,7 @@ namespace almo {
         std::string base64_image = base64_encode(image_data);
 
         // Generate the HTML tag with Base64-encoded image data
-        std::string output = "<img src=\"data:image/jpeg;base64," + base64_image + "\" alt=\"" + content + "\" width=\"50%\" class=\"center\">";
+        std::string output = "<img src=\"data:image/png;base64," + base64_image + "\" alt=\"" + content + "\" width=\"50%\" class=\"center\">";
         return output;
     }
 
@@ -839,7 +839,7 @@ namespace almo {
     }
 
     std::string render_table(std::vector<std::string> from_render, int n_row, int n_col, std::vector<std::string> col_names, std::vector<int> col_format) {
-        // std::cout << "render table" << std::endl;
+
         std::string output = "<table>";
         output += "<tr>";
         for (int i = 0; i < n_col; i++) {
@@ -856,10 +856,17 @@ namespace almo {
             }
             output += "</tr>";
         }
+
+        output += "</table>";
         return output;
     }
 
 
+   std::string render_inline_code(nlohmann::json j, std::string content) {
+        std::string output = "<code>" + content + "</code>";
+        return output;
+    }
+
 
     bool haschild(nlohmann::json j) {
         return !(j["class"] == "PlainText" || j["class"] == "NewLine" || j["class"] == "Url");
@@ -887,12 +894,15 @@ namespace almo {
             for (nlohmann::json child : j["content"]) {
                 from_render.push_back(build_block(child, render_map));
             }
+
+
             std::vector<int> col_format = j["col_format"];
             std::vector<std::string> col_names = j["col_names"];
 
             std::string n_row_str = j["n_row"];
             std::string n_col_str = j["n_col"];
 
+
             int n_row = std::stoi(n_row_str);
             int n_col = std::stoi(n_col_str);
 
@@ -937,6 +947,8 @@ namespace almo {
         render_map["InlineImage"] = render_inline_image;
         render_map["ListBlock"] = render_list_block;
         render_map["Item"] = render_item;
+        render_map["InlineCodeBlock"] = render_inline_code;
+
 
         std::string outputs;