diff --git a/docs/integration/codly.md b/docs/integration/codly.md
new file mode 100644
index 000000000..601668ffa
--- /dev/null
+++ b/docs/integration/codly.md
@@ -0,0 +1,37 @@
+---
+sidebar_position: 5
+---
+
+# Codly
+
+When using Codly, we should initialize it using the `config-common(preamble: {..})` method.
+
+```typst
+#import "@preview/touying:0.5.2": *
+#import themes.simple: *
+#import "@preview/codly:1.0.0": *
+
+#show: codly-init.with()
+
+#show: simple-theme.with(
+  aspect-ratio: "16-9",
+  config-common(preamble: {
+    codly(languages: (
+      rust: (
+        name: "Rust",
+        icon: text(font: "tabler-icons", "\u{fa53}"),
+        color: rgb("#CE412B"),
+      ),
+    ))
+  }),
+)
+
+== First slide
+
+#raw(lang: "rust", block: true,
+`pub fn main() {
+  println!("Hello, world!");
+}`.text)
+```
+
+![image](https://github.com/touying-typ/touying/assets/34951714/0be2fbaf-cc03-4776-932f-259503d5e23a)
diff --git a/docs/integration/ctheorems.md b/docs/integration/ctheorems.md
index 8843bad44..b44ce96b1 100644
--- a/docs/integration/ctheorems.md
+++ b/docs/integration/ctheorems.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 5
+sidebar_position: 6
 ---
 
 # Ctheorems
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integration/codly.md b/i18n/zh/docusaurus-plugin-content-docs/current/integration/codly.md
new file mode 100644
index 000000000..decfcf551
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/integration/codly.md
@@ -0,0 +1,37 @@
+---
+sidebar_position: 5
+---
+
+# Codly
+
+当我们使用 Codly 时，我们可以通过 `config-common(preamble: {..})` 初始化。
+
+```typst
+#import "@preview/touying:0.5.2": *
+#import themes.simple: *
+#import "@preview/codly:1.0.0": *
+
+#show: codly-init.with()
+
+#show: simple-theme.with(
+  aspect-ratio: "16-9",
+  config-common(preamble: {
+    codly(languages: (
+      rust: (
+        name: "Rust",
+        icon: text(font: "tabler-icons", "\u{fa53}"),
+        color: rgb("#CE412B"),
+      ),
+    ))
+  }),
+)
+
+== First slide
+
+#raw(lang: "rust", block: true,
+`pub fn main() {
+  println!("Hello, world!");
+}`.text)
+```
+
+![image](https://github.com/touying-typ/touying/assets/34951714/0be2fbaf-cc03-4776-932f-259503d5e23a)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/integration/ctheorems.md b/i18n/zh/docusaurus-plugin-content-docs/current/integration/ctheorems.md
index ece080e40..8a70f2792 100644
--- a/i18n/zh/docusaurus-plugin-content-docs/current/integration/ctheorems.md
+++ b/i18n/zh/docusaurus-plugin-content-docs/current/integration/ctheorems.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 5
+sidebar_position: 6
 ---
 
 # Ctheorems
diff --git a/i18n/zh/docusaurus-plugin-content-docs/version-0.5.x/integration/codly.md b/i18n/zh/docusaurus-plugin-content-docs/version-0.5.x/integration/codly.md
new file mode 100644
index 000000000..decfcf551
--- /dev/null
+++ b/i18n/zh/docusaurus-plugin-content-docs/version-0.5.x/integration/codly.md
@@ -0,0 +1,37 @@
+---
+sidebar_position: 5
+---
+
+# Codly
+
+当我们使用 Codly 时，我们可以通过 `config-common(preamble: {..})` 初始化。
+
+```typst
+#import "@preview/touying:0.5.2": *
+#import themes.simple: *
+#import "@preview/codly:1.0.0": *
+
+#show: codly-init.with()
+
+#show: simple-theme.with(
+  aspect-ratio: "16-9",
+  config-common(preamble: {
+    codly(languages: (
+      rust: (
+        name: "Rust",
+        icon: text(font: "tabler-icons", "\u{fa53}"),
+        color: rgb("#CE412B"),
+      ),
+    ))
+  }),
+)
+
+== First slide
+
+#raw(lang: "rust", block: true,
+`pub fn main() {
+  println!("Hello, world!");
+}`.text)
+```
+
+![image](https://github.com/touying-typ/touying/assets/34951714/0be2fbaf-cc03-4776-932f-259503d5e23a)
diff --git a/i18n/zh/docusaurus-plugin-content-docs/version-0.5.x/integration/ctheorems.md b/i18n/zh/docusaurus-plugin-content-docs/version-0.5.x/integration/ctheorems.md
index ece080e40..8a70f2792 100644
--- a/i18n/zh/docusaurus-plugin-content-docs/version-0.5.x/integration/ctheorems.md
+++ b/i18n/zh/docusaurus-plugin-content-docs/version-0.5.x/integration/ctheorems.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 5
+sidebar_position: 6
 ---
 
 # Ctheorems
diff --git a/versioned_docs/version-0.5.x/integration/codly.md b/versioned_docs/version-0.5.x/integration/codly.md
new file mode 100644
index 000000000..601668ffa
--- /dev/null
+++ b/versioned_docs/version-0.5.x/integration/codly.md
@@ -0,0 +1,37 @@
+---
+sidebar_position: 5
+---
+
+# Codly
+
+When using Codly, we should initialize it using the `config-common(preamble: {..})` method.
+
+```typst
+#import "@preview/touying:0.5.2": *
+#import themes.simple: *
+#import "@preview/codly:1.0.0": *
+
+#show: codly-init.with()
+
+#show: simple-theme.with(
+  aspect-ratio: "16-9",
+  config-common(preamble: {
+    codly(languages: (
+      rust: (
+        name: "Rust",
+        icon: text(font: "tabler-icons", "\u{fa53}"),
+        color: rgb("#CE412B"),
+      ),
+    ))
+  }),
+)
+
+== First slide
+
+#raw(lang: "rust", block: true,
+`pub fn main() {
+  println!("Hello, world!");
+}`.text)
+```
+
+![image](https://github.com/touying-typ/touying/assets/34951714/0be2fbaf-cc03-4776-932f-259503d5e23a)
diff --git a/versioned_docs/version-0.5.x/integration/ctheorems.md b/versioned_docs/version-0.5.x/integration/ctheorems.md
index 8843bad44..b44ce96b1 100644
--- a/versioned_docs/version-0.5.x/integration/ctheorems.md
+++ b/versioned_docs/version-0.5.x/integration/ctheorems.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 5
+sidebar_position: 6
 ---
 
 # Ctheorems