use codapi for interactive code examples

Signed-off-by: Aolin <[email protected]>

website/docs/cpp/cpp-wiki.md

@@ -19,6 +19,9 @@ int main() {
 }
 ```
 
+<codapi-snippet sandbox="cpp" editor="basic" init-delay="500">
+</codapi-snippet>
+
 To avoid the preceding error, use the following code instead:
 
 ```cpp
@@ -29,3 +32,6 @@ int main() {
     std::cout << max << std::endl; // 0
 }
 ```
+
+<codapi-snippet sandbox="cpp" editor="basic" init-delay="500">
+</codapi-snippet>

website/docs/python/python-iterator.md

@@ -19,6 +19,9 @@ for item in a:
     print(item)
 ```
 
+<codapi-snippet sandbox="python" editor="basic" init-delay="500">
+</codapi-snippet>
+
 The output is as follows:
 
 ```shell

website/docs/python/time-in-python.md

@@ -51,6 +51,9 @@ print(time.time())
 # 1678526843.67069
 ```
 
+<codapi-snippet sandbox="python" editor="basic" init-delay="500">
+</codapi-snippet>
+
 在计算时间差的场景时，如果使用 `time.time()`，那么计算的时间差可能不准确，甚至可能出现负数，具体原因可以参考[日历时钟](#日历时钟-time-of-day-clock)。
 
 ### `time.monotonic()`
@@ -78,6 +81,9 @@ print(time.monotonic())
 # 672615.062683958
 ```
 
+<codapi-snippet sandbox="python" editor="basic" init-delay="500">
+</codapi-snippet>
+
 在计算时间差的场景时，使用 `time.monotonic()` 可以保证计算的时间差不会出现负数，具体原因可以参考[单调时钟](#单调时钟-monotonic-clock)。
 
 ### `datetime.datetime.now()`
@@ -91,6 +97,9 @@ print(datetime.datetime.now())
 # 2023-03-11 17:33:59.999052
 ```
 
+<codapi-snippet sandbox="python" editor="basic" init-delay="500">
+</codapi-snippet>
+
 在计算时间差的场景时，使用 `datetime.datetime.now()` 计算的时间差是 `timedelta` 对象，是更人类友好的时间差表示方式。但是 `datetime.datetime` 采用的是日历时钟，因此计算的时间差可能不准确，具体原因可以参考[日历时钟](#日历时钟-time-of-day-clock)。
 
 ## 时间同步与时钟

website/docs/shell/bash-wiki.md

@@ -63,6 +63,9 @@ var="test-123"
 echo "${var#test-}" # 123
 ```
 
+<codapi-snippet sandbox="bash" editor="basic" init-delay="500">
+</codapi-snippet>
+
 When you use `find ${DIR_PATH}` command to search for files, the result will be prefixed with `${DIR_PATH}`. To remove the prefix, you can use the `#` operator. For example:
 
 ```bash
@@ -131,6 +134,9 @@ echo "${var#*test-}" # test-123
 echo "${var##*test-}" # 123
 ```
 
+<codapi-snippet sandbox="bash" editor="basic" init-delay="500">
+</codapi-snippet>
+
 In the following example, `a*b` pattern matches any sequence that starts with `a` and ends with `b`.
 
 ```bash
@@ -143,6 +149,9 @@ echo "${var#a*c}" # cc
 echo "${var##a*c}" #
 ```
 
+<codapi-snippet sandbox="bash" editor="basic" init-delay="500">
+</codapi-snippet>
+
 :::
 
 ### Remove the suffix using `%`
@@ -154,6 +163,9 @@ var="test-123"
 echo "${var%-123}" # test
 ```
 
+<codapi-snippet sandbox="bash" editor="basic" init-delay="500">
+</codapi-snippet>
+
 :::tip
 
 What is the difference between `%` and `%%`?

website/docs/shell/sed-wiki.md

@@ -25,6 +25,9 @@ echo "./test.md" | sed 's~^./~~'
 # test.md
 ```
 
+<codapi-snippet sandbox="bash" editor="basic" init-delay="500">
+</codapi-snippet>
+
 In the preceding substitution command <code>s~**^./**~~</code>:
 
 - `s` is the `sed` command that specifies a string substitution.
@@ -49,4 +52,7 @@ echo "12345678,test.md,..." | sed -E 's~^[0-9]+,~~'
 # test.md,...
 ```
 
+<codapi-snippet sandbox="bash" editor="basic" init-delay="500">
+</codapi-snippet>
+
 For more details, refer to [`--regexp-extended`](https://www.gnu.org/software/sed/manual/sed.html).

website/docusaurus.config.js

@@ -12,7 +12,11 @@ export default {
   onBrokenLinks: 'throw',
   onBrokenMarkdownLinks: 'warn',
   favicon: 'img/logo.png',
-
+  stylesheets: [
+      {
+          href: "https://unpkg.com/@antonz/[email protected]/dist/snippet.css",
+      },
+  ],
   scripts: [
     {
       src: 'https://platform.twitter.com/widgets.js',
@@ -22,6 +26,10 @@ export default {
       src: 'https://umm.oreo.life/juicy.js',
       async: true,
       'data-website-id': '7a07d44e-77c0-43c5-aaa3-5071404be998'
+    },
+    {
+      src: "https://unpkg.com/@antonz/[email protected]/dist/snippet.js",
+      defer: true,
     }
   ],