nadesiko3 3.2.27

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 kujirahand
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,107 @@
+# 日本語プログラミング言語「なでしこ3」
+
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)
+[![npm version](https://badge.fury.io/js/nadesiko3.svg)](https://www.npmjs.com/package/nadesiko3)
+![Node.js CI](https://github.com/kujirahand/nadesiko3/workflows/Node.js%20CI/badge.svg)
+
+## 「なでしこ3」とは
+
+「なでしこ3」とは、日本語のプログラミング言語です。HTML5/JavaScriptをベースとしているので、PC/スマホ/タブレットなど、さまざまな環境で動作させることができます。
+
+日本語プログラミング言語は、読みやすく理解しやすいのが特徴で、初めてでも楽しくプログラミングを覚えることができます。また、バッチ処理や定型処理などを手軽に記述できます。
+
+- [なでしこのWebサイト](https://nadesi.com/top/)
+  - [なでしこ3のWebサイト](https://nadesi.com/doc3/)
+  - [なでしこ3(GitHub Pages)](https://kujirahand.github.io/nadesiko3/)
+
+## 対応機器/ブラウザ
+
+[doc/browsers.md](doc/browsers.md) をご覧ください。
+
+## ブラウザで利用する場合
+
+以下、Webエディタ上で、なでしこを実行できます。
+
+- [なでしこ3簡易エディタ](https://nadesi.com/doc3/index.php?%E3%81%AA%E3%81%A7%E3%81%97%E3%81%933%E7%B0%A1%E6%98%93%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF)
+  - [なでしこ3貯蔵庫(プログラム一覧)](https://n3s.nadesi.com/)
+  - [なでしこエディタの一覧](https://nadesi.com/doc3/index.php?%E3%81%AA%E3%81%A7%E3%81%97%E3%81%933%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%81%AE%E4%B8%80%E8%A6%A7)
+
+## 各OSごとに利用する方法
+
+なでしこ3をPC向けにローカル環境で動作させることも可能です。
+
+- [OS別のインストール方法](https://nadesi.com/doc3/index.php?OS%E5%88%A5)
+
+### Windowsで利用する
+
+以下のリンクを開いて、「Source code(zip)」をクリックしてダウンロードします。
+これは、Node.jsや必要なモジュール一式を梱包したものです。
+
+- [なでしこ3のWindows配布パッケージ](https://github.com/kujirahand/nadesiko3win32/releases)
+
+解凍したら「nako3edit.vbs」(PC版)または「start.vbs」(Web版)をクリックします。すると、なでしこエディタが起動します。
+
+### npm でインストール
+
+先にNode.jsをインストールします。
+次いで、コマンドラインから以下のコマンドを実行します。
+
+```bash
+npm install -g nadesiko3
+```
+
+すると、cnako3というコマンドで、なでしこを利用できます。
+
+```bash
+# なでしこのサーバーを起動
+npm start
+# なでしこエディタ(PC版)を起動
+npm run nako3edit
+# なでしこエディタ(WEB版)を起動
+npm run nako3server
+```
+
+### Gitからインストール
+
+また、以下のコマンドを実行すると、ブラウザ上になでしこの簡易エディタが起動します。
+
+```bash
+git clone https://github.com/kujirahand/nadesiko3.git
+cd nadesiko3
+npm install
+```
+
+#### 追加インストール(macOS/Linux)
+
+必要に応じて以下のコマンドをインストールします。
+
+macOS:
+
+```bash
+# 『圧縮』『解凍』命令のために
+brew install p7zip
+```
+
+Ubuntu/Debian:
+
+```bash
+# 『圧縮』『解凍』命令のために
+sudo apt install p7zip-full
+# 『キー送信』命令のために
+sudo apt install xdotool
+```
+
+全てのコマンドが正しく動くかを確認するには、以下のコマンドを実行します。
+
+```bash
+npm test
+```
+
+## GUI(Electron)を使う
+
+Electronを使うと手軽にGUIを構築できます。Electronについては、[doc/SETUP.md](doc/SETUP.md)を参考にしてください。
+
+## なでしこ3の開発に参加する
+
+なでしこ3自身を開発するために、開発環境を整えようという方は、 [doc/SETUP.md](doc/SETUP.md) をご覧ください。
+また、なでしこ3開発者向けの[Gitter](https://gitter.im/nadesiko3/community)への参加も可能です。

package/bin/cnako3

@@ -0,0 +1,10 @@
+#!/bin/bash
+ROOT_DIR=$(
+  cd $(dirname "$0")
+  cd ..
+  pwd
+)
+SRC_DIR=$ROOT_DIR/src
+NAKO_JS=$SRC_DIR/cnako3.js
+
+/usr/bin/env node "$NAKO_JS" $*

package/bin/cnako3.bat

@@ -0,0 +1,11 @@
+@echo off
+
+pushd %~dp0..
+set ROOT_DIR=%CD%
+popd
+
+SET SRC_DIR=%ROOT_DIR%\src
+SET CNAKO_JS=%SRC_DIR%\cnako3.js
+SET NODE_EXE=%ROOT_DIR%\nodejs\node.exe
+
+%NODE_EXE% %CNAKO_JS% %1 %2 %3 %4 %5 %6 %7 %8 %9

package/bin/nako3server.bat

@@ -0,0 +1,6 @@
+@echo off
+SET ROOT_DIR=%~dp0\..
+cd %ROOT_DIR%
+call npm run server
+pause
+

package/demo/ace_editor.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nadesiko3 Editor</title>
+    <link rel="stylesheet" href="../src/wnako3_editor.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js" integrity="sha512-GZ1RIgZaSc8rnco/8CXfRdCpDxRCphenIiZ2ztLy3XQfCbQUSCuk8IudvNHxkRA3oUg6q0qejgN/qqyG1duv5Q==" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-language_tools.min.js" integrity="sha512-8qx1DL/2Wsrrij2TWX5UzvEaYOFVndR7BogdpOyF4ocMfnfkw28qt8ULkXD9Tef0bLvh3TpnSAljDC7uyniEuQ==" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-options.min.js" integrity="sha512-oHR+WVzBiVZ6njlMVlDDLUIOLRDfUUfRQ55PfkZvgjwuvGqL4ohCTxaahJIxTmtya4jgyk0zmOxDMuLzbfqQDA==" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-code_lens.min.js" integrity="sha512-gsDyyKTnOmSWRDzUbpYcPjzVsEyFGSWeWefzVKvbMULPR2ElIlKKsOtU3ycfybN9kncZXKLFSsUiG3cgJUbc/g==" crossorigin="anonymous"></script>
+    <script src="../release/wnako3.js"></script>
+    <script src="../release/version.js"></script>
+    <script src="../release/plugin_markup.js"></script>
+    <script src="../release/plugin_csv.js"></script>
+    <script src="../release/plugin_kansuji.js"></script>
+    <script src="../release/plugin_datetime.js"></script>
+    <script src="../release/plugin_turtle.js"></script>
+    <script src="../release/plugin_caniuse.js"></script>
+    <script src="../release/plugin_webworker.js"></script>
+
+    <!-- mochaを一番最後に読み込む必要がある -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/8.3.0/mocha.min.js" integrity="sha512-LA/TpBXau/JNubKzHQhdi5vGkRLyQjs1vpuk2W1nc8WNgf/pCqBplD8MzlzeKJQTZPvkEZi0HqBDfRC2EyLMXw==" crossorigin="anonymous"></script>
+</head>
+<body>
+単純な例
+<div id="editor1">もしはいならば
+    「こんにちは」を表示
+ここまで
+</div>
+インデント構文
+<div id="editor2">！インデント構文
+Nを1から3まで繰り返す
+    Nを表示
+
+    「1行目
+2行目」を表示
+
+/*
+範囲コメント
+*/
+</div>
+コンパイルエラーの表示
+<div id="editor3">
+　　「{」を表示
+</div>
+readonly
+<div id="editor4" data-nako3-readonly="true">1+2を表示
+</div>
+コンパイルエラーの表示の無効化
+<div id="editor5" data-nako3-disable-marker="true">
+「{」を表示
+</div>
+エディタのリサイズ
+<div id="editor8" data-nako3-resizable="true"></div>
+長いプログラム
+<div id="editor6"></div>
+実行時エラーの表示
+<div id="editor7">Aを表示
+1のエラー発生
+</div>
+テストの定義にcode lensを表示する
+<div id="editor9">●テスト:足すとは
+ここまで
+
+●テスト:引くとは
+ここまで
+</div>
+    <script>
+// text.repeat(n)
+function repeat(text, n) {
+    var s = ''
+    for (var i = 0; i < n; i++) {
+        s += text
+    }
+    return s
+}
+navigator.nako3.setupEditor("editor1")
+navigator.nako3.setupEditor("editor2")
+navigator.nako3.setupEditor("editor3")
+navigator.nako3.setupEditor("editor4")
+navigator.nako3.setupEditor("editor5")
+navigator.nako3.setupEditor("editor6").editor.setValue(repeat("A=1\nB=2\nA+Bを表示\n", 200), -1)
+navigator.nako3.setupEditor("editor7").run({ preCode: 'A=1\n' }).promise  // 他のエディタも連続して実行するならこれをawaitすること。
+navigator.nako3.setupEditor("editor8").editor.setValue(repeat("A=1\nB=2\nA+Bを表示\n", 30), -1)
+navigator.nako3.setupEditor("editor9").codeLensListeners.push({ name: 'test', callback: function () {} })
+    </script>
+</body>
+</html>

package/demo/ace_editor_tabs.html

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nadesiko3 Editor</title>
+    <link rel="stylesheet" href="../src/wnako3_editor.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js" integrity="sha512-GZ1RIgZaSc8rnco/8CXfRdCpDxRCphenIiZ2ztLy3XQfCbQUSCuk8IudvNHxkRA3oUg6q0qejgN/qqyG1duv5Q==" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-language_tools.min.js" integrity="sha512-8qx1DL/2Wsrrij2TWX5UzvEaYOFVndR7BogdpOyF4ocMfnfkw28qt8ULkXD9Tef0bLvh3TpnSAljDC7uyniEuQ==" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-options.min.js" integrity="sha512-oHR+WVzBiVZ6njlMVlDDLUIOLRDfUUfRQ55PfkZvgjwuvGqL4ohCTxaahJIxTmtya4jgyk0zmOxDMuLzbfqQDA==" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-code_lens.min.js" integrity="sha512-gsDyyKTnOmSWRDzUbpYcPjzVsEyFGSWeWefzVKvbMULPR2ElIlKKsOtU3ycfybN9kncZXKLFSsUiG3cgJUbc/g==" crossorigin="anonymous"></script>
+    <script src="../release/wnako3.js"></script>
+    <script src="../release/version.js"></script>
+    <script src="../release/plugin_markup.js"></script>
+    <script src="../release/plugin_csv.js"></script>
+    <script src="../release/plugin_kansuji.js"></script>
+    <script src="../release/plugin_datetime.js"></script>
+    <script src="../release/plugin_turtle.js"></script>
+    <script src="../release/plugin_caniuse.js"></script>
+    <script src="../release/plugin_webworker.js"></script>
+
+    <!-- mochaを一番最後に読み込む必要がある -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/8.3.0/mocha.min.js" integrity="sha512-LA/TpBXau/JNubKzHQhdi5vGkRLyQjs1vpuk2W1nc8WNgf/pCqBplD8MzlzeKJQTZPvkEZi0HqBDfRC2EyLMXw==" crossorigin="anonymous"></script>
+
+    <style>
+        /* ボタンの高さを揃える */
+        .toolbar button, .toolbar input {
+            font-size: 12px;
+            height: 28px;
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            vertical-align: top;
+        }
+
+        /* 出力の文字サイズと文字色 */
+        #output {
+            font-size: 13px;
+            color: rgb(77, 77, 77);
+        }
+    </style>
+</head>
+<body>
+<div class="toolbar">
+    <button id="add">📁 ファイルを追加</button>
+    <button id="remove">🗑 ファイルを削除</button>
+    <span id="file-list"></span>
+</div>
+<div id="editor" data-nako3-resizable="true"></div>
+<div class="toolbar">
+    <button id="run">表示中のファイルを実行</button>
+</div>
+    <div id="output"></div>
+    <script>
+/** @type {import('../src/wnako3.js')} */
+const nako3 = navigator.nako3
+const { editor, editorMarkers, editorTabs, retokenize, run, codeLensListeners } = nako3.setupEditor('editor')
+
+/** @type {Map<number, HTMLButtonElement>} */
+const tabButtons = new Map()
+/** @type {Map<number, import('../src/wnako3_editor.js').EditorTabState>} */
+const hiddenTabStates = new Map()
+
+let fileCount = 0
+let activeFile = 1
+
+// タブの切り替え
+const switchTab = (fileName) => {
+    hiddenTabStates.set(activeFile, editorTabs.getTab())
+    editorTabs.setTab(hiddenTabStates.get(fileName))
+    activeFile = fileName
+}
+
+// ファイルの追加
+const addFile = () => {
+    const id = ++fileCount
+
+    // <button class="file">{id}.nako3</button> を挿入する。
+    const button = document.createElement('button')
+    button.innerText = id + '.nako3'
+    button.classList.add('file')
+    button.addEventListener('click', () => {
+        tabButtons.get(activeFile).disabled = false
+        button.disabled = true
+        switchTab(id)
+    })
+    document.getElementById('file-list').appendChild(button)
+    tabButtons.set(id, button)
+
+    // エディタの状態を生成
+    hiddenTabStates.set(id, editorTabs.newTab(`// ${id}.nako3\n`))
+}
+document.getElementById('add').addEventListener('click', () => { addFile() })
+
+// ファイルの削除
+const removeFile = () => {
+    if (tabButtons.size <= 1) {
+        alert('全てのファイルを削除することはできません。')
+        return
+    }
+    const input = prompt('削除するファイル名を指定してください。', tabButtons.size + '.nako3')
+    if (input === null) {
+        return
+    }
+    const id = +input.replace(/\.nako3$/, '')
+    if (!Number.isInteger(id)) {
+        alert(`${id}.nako3 は存在しません。`)
+        return
+    }
+    if (id === activeFile) {
+        alert(`表示中のファイルは削除できません。`)
+        return
+    }
+    document.getElementById('file-list').removeChild(tabButtons.get(id))
+    tabButtons.delete(id)
+}
+document.getElementById('remove').addEventListener('click', () => { removeFile() })
+
+// 実行
+document.getElementById('run').addEventListener('click', () => {
+    /** @type {Record<string, string>} */
+    const localFiles = {}
+    for (const [k, v] of hiddenTabStates) {
+        localFiles[`${k}.nako3`] = v.content
+    }
+    run({ outputContainer: document.getElementById('output'), file: `${activeFile}.nako3`, localFiles })
+})
+
+// テスト実行
+codeLensListeners.push({
+    name: 'test',
+    callback: (/** @type {string | undefined} */testName) => {
+        /** @type {Record<string, string>} */
+        const localFiles = {}
+        for (const [k, v] of hiddenTabStates) {
+            localFiles[`${k}.nako3`] = v.content
+        }
+        run({ outputContainer: document.getElementById('output'), file: `${activeFile}.nako3`, localFiles, method: 'test', testName })
+    },
+})
+
+// 1.nako3の値を設定する
+addFile()
+tabButtons.get(1).disabled = true
+editor.setValue(`\
+!「2.nako3」を取り込む
+
+「1.nako3」を表示
+Aを表示
+`)
+editor.session.selection.clearSelection()
+
+// 2.nako3の値を設定する
+addFile()
+hiddenTabStates.get(2).content = `\
+「2.nako3」を表示
+A=2
+`
+    </script>
+</body>
+</html>

package/demo/basic.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>なでしこ3</title>
+  <!-- common -->
+  <link rel="stylesheet" type="text/css" href="css/common.css">
+  <!-- basic -->
+  <link rel="stylesheet" type="text/css" href="css/basic.css">
+  <link rel="stylesheet" href="../src/wnako3_editor.css">
+  <script src="extlib/ace@1.4.12/ace.js" integrity="sha512-GZ1RIgZaSc8rnco/8CXfRdCpDxRCphenIiZ2ztLy3XQfCbQUSCuk8IudvNHxkRA3oUg6q0qejgN/qqyG1duv5Q==" crossorigin="anonymous"></script>
+  <script src="extlib/ace@1.4.12/ext-language_tools.min.js" integrity="sha512-8qx1DL/2Wsrrij2TWX5UzvEaYOFVndR7BogdpOyF4ocMfnfkw28qt8ULkXD9Tef0bLvh3TpnSAljDC7uyniEuQ==" crossorigin="anonymous"></script>
+  <script src="extlib/ace@1.4.12/ext-options.min.js" integrity="sha512-oHR+WVzBiVZ6njlMVlDDLUIOLRDfUUfRQ55PfkZvgjwuvGqL4ohCTxaahJIxTmtya4jgyk0zmOxDMuLzbfqQDA==" crossorigin="anonymous"></script>
+  <script src="extlib/ace@1.4.12/ext-code_lens.min.js" integrity="sha512-gsDyyKTnOmSWRDzUbpYcPjzVsEyFGSWeWefzVKvbMULPR2ElIlKKsOtU3ycfybN9kncZXKLFSsUiG3cgJUbc/g==" crossorigin="anonymous"></script>
+</head>
+<body>
+<h1>なでしこ3デモ</h1>
+<hr>
+<h3>試してみよう！</h3>
+<div class="sbox">
+  <h4>簡単な計算</h4>
+  <div class="editor-component">
+    <script type="application/json">
+      {
+        "title": "簡単な計算",
+        "code": "1+2を表示。\n100÷5を表示。\n(1 + 2)×3を表示。"
+      }
+    </script>
+  </div>
+</div>
+
+<div class="sbox">
+  <h4>変数を使った計算</h4>
+  <div class="editor-component">
+    <script type="application/json">
+      {
+        "title": "変数を使った計算",
+        "code": "価格=500\n個数＝3\n税率=0.08\n合計額=価格×個数\n税額＝合計額×税率\n支払い＝合計額＋税額\n「お支払いは、{支払い}円です！」と表示。"
+      }
+    </script>
+  </div>
+</div>
+
+<div class="sbox">
+  <h4>BMIの計算</h4>
+  <div class="editor-component">
+    <script type="application/json">
+      {
+        "title": "BMIの計算",
+        "code": "身長＝160\n体重＝50\n身長M=身長÷100\nBMI=体重÷(身長M×身長M)\n適正体重＝身長M×身長M×22\n肥満度=(体重/適正体重)\n「BMI ... {BMI}」を表示。\n「肥満度 ... {肥満度}」を表示。\n「適正体重 ... {適正体重}」を表示。"
+      }
+    </script>
+  </div>
+</div>
+
+<div class="sbox">
+  <h3>その他</h3>
+  <ul>
+    <li><a href="browsers.html">対応機器/Webブラウザ</a></li>
+  </ul>
+</div>
+
+  <!-- editor -->
+  <!--React.jsのスクリプトはHTMLの末尾で読み込む-->
+  <script src="../release/wnako3.js"></script>
+  <script src="../release/editor.js"></script>
+  <script src="../release/plugin_turtle.js"></script>
+  <script src="../release/plugin_markup.js"></script>
+</body>
+</html>

package/demo/browsers.html

@@ -0,0 +1,128 @@
+<h1>対応機器/ブラウザ</h1>
+
+<ul>
+  <li>ブラウザ
+    <ul>
+      <li>モバイル
+        <ul>
+          <li>Chrome for Android
+            <ul>
+              <li>80</li>
+            </ul>
+          </li>
+          <li>Firefox for Android
+            <ul>
+              <li>68</li>
+            </ul>
+          </li>
+          <li>QQ Browser
+            <ul>
+              <li>1.2</li>
+            </ul>
+          </li>
+          <li>UC Browser for Android
+            <ul>
+              <li>12.12</li>
+            </ul>
+          </li>
+          <li>Android Browser
+            <ul>
+              <li>80</li>
+            </ul>
+          </li>
+          <li>Baidu Browser
+            <ul>
+              <li>7.12</li>
+            </ul>
+          </li>
+          <li>iOS Safari
+            <ul>
+              <li>13.3</li>
+              <li>13.2</li>
+              <li>13.0-13.1</li>
+              <li>12.2-12.4</li>
+              <li>12.0-12.1</li>
+              <li>11.3-11.4</li>
+              <li>10.3</li>
+              <li>9.3</li>
+            </ul>
+          </li>
+          <li>KaiOS Browser
+            <ul>
+              <li>2.5</li>
+            </ul>
+          </li>
+          <li>Opera Mini
+            <ul>
+              <li>all</li>
+            </ul>
+          </li>
+          <li>Opera Mobile
+            <ul>
+              <li>46</li>
+            </ul>
+          </li>
+          <li>Samsung Internet
+            <ul>
+              <li>11.1</li>
+              <li>10.1</li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+      <li>PC
+        <ul>
+          <li>Chrome
+            <ul>
+              <li>80</li>
+              <li>79</li>
+              <li>49</li>
+            </ul>
+          </li>
+          <li>Edge
+            <ul>
+              <li>80</li>
+              <li>79</li>
+              <li>18</li>
+            </ul>
+          </li>
+          <li>Firefox
+            <ul>
+              <li>74</li>
+              <li>73</li>
+              <li>72</li>
+              <li>68</li>
+            </ul>
+          </li>
+          <li>Internet Explorer
+            <ul>
+              <li>11</li>
+            </ul>
+          </li>
+          <li>Opera
+            <ul>
+              <li>66</li>
+              <li>65</li>
+            </ul>
+          </li>
+          <li>Safari
+            <ul>
+              <li>13</li>
+              <li>12.1</li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </li>
+  <li>PC (Windows/macOS/Linux)
+    <ul>
+      <li>Node
+        <ul>
+          <li>12.16.0</li>
+          <li>10.19.0</li>
+        </ul>
+      </li>
+    </ul>
+  </li>
+</ul>

package/demo/css/basic.css

@@ -0,0 +1,3 @@
+.sbox {
+  border: 1px solid gray;
+}