From dd38b25ee954946ca19eb6832065ddfdb6219e2f Mon Sep 17 00:00:00 2001
From: Oyasuminasai <61616918+nfnfgo@users.noreply.github.com>
Date: Fri, 5 Jul 2024 22:31:00 +0800
Subject: [PATCH] feat: Update docs. More detailed install guide.
---
README.md | 80 ++++++++++++++++++++++++++++++++++++++++----
docs/dev/renderer.md | 6 +++-
docs/plug_install.md | 55 ++++++++++++++++++++++++++++++
3 files changed, 134 insertions(+), 7 deletions(-)
create mode 100644 docs/plug_install.md
diff --git a/README.md b/README.md
index f202223..1def0d2 100644
--- a/README.md
+++ b/README.md
@@ -1,17 +1,85 @@
# LiteLoaderQQNT-Markdown
+![GitHub Release](https://img.shields.io/github/v/release/d0j1a1701/LiteLoaderQQNT-Markdown?style=for-the-badge&logo=github) ![GitHub License](https://img.shields.io/github/license/d0j1a1701/LiteLoaderQQNT-Markdown?style=for-the-badge&color=blue) ![GitHub last commit](https://img.shields.io/github/last-commit/d0j1a1701/LiteLoaderQQNT-Markdown?style=for-the-badge&logo=github)
+ ![GitHub Issues or Pull Requests](https://img.shields.io/github/issues/d0j1a1701/LiteLoaderQQNT-Markdown?style=for-the-badge&color=rgb(50%2C180%2C50))
+
+
## 简介
-这是一个 [LiteLoaderQQNT](https://github.com/mo-jinran/LiteLoaderQQNT) 插件,使用 [Markdown-it](https://github.com/markdown-it/markdown-it) 为 QQnt 增加 Markdown 和 $\LaTeX$ 渲染功能!
+这是一个 [LiteLoaderQQNT](https://github.com/mo-jinran/LiteLoaderQQNT) 插件,使用 [Markdown-it](https://github.com/markdown-it/markdown-it) 为 QQNT 增加 Markdown 和 $\LaTeX$ 以及HTML渲染功能!
-![](https://raw.githubusercontent.com/d0j1a1701/LiteLoaderQQNT-Markdown/main/screenshots/1.png)
+## 安装本插件
+
+您可以跟随[本插件的安装引导](./docs/plug_install.md)为自己的QQNT安装本插件。
## 功能
-- 标准 Markdown 语法;
-- 基于 [KaTeX](https://katex.org/) 的 $\LaTeX$ 公式渲染;
+### 标准 Markdown 语法的消息渲染
+
+![image](https://github.com/d0j1a1701/LiteLoaderQQNT-Markdown/assets/61616918/41b9fa09-c888-4b06-822b-7384d3b05df6)
+
+对应消息原文本
+
+```markdown
+## Normal
+
+Normal test
+
+Normal test with HTML Entities & " ' < > .
+
+## List
+
+- List Item
+- List Item
+
+1. Ordered List
+2. Ordered List
+
+## Blockquote
+
+> Test
+>
+>> Nested Test
+```
+
+
+
+### 代码块渲染和高亮
+
+
+
+![image](https://github.com/d0j1a1701/LiteLoaderQQNT-Markdown/assets/61616918/22acdfa7-a033-4269-839c-04ca829f0a5a)
+
+对应消息原文本
+
+ ```javascript
+ // Declare a function
+ function myFunction() {
+ document.getElementById("demo").innerHTML = "Hello World!";
+ }
+
+ // Call the function
+ myFunction();
+ ```
+
+
+
+### $\LaTeX$ 公式进行渲染(基于 [KaTeX](https://katex.org/) )
+
+![image](https://github.com/d0j1a1701/LiteLoaderQQNT-Markdown/assets/61616918/343a74b7-1c35-46a6-af15-e5ad7eb82376)
+
+对应消息原文本
+
+ Inline LaTeX Here: $e^{i\pi} + 1 = 0$!
+
+ LaTeX Block also available!
+
+ $$
+ \displaystyle \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
+ $$
+
+
## 注意事项
-- 若发生了任何不好的事情请积极发 issue,发 issue 时带上系统版本,插件列表和 LiteLoaderQQNT 设置中所示的版本信息。
-- 使用 `npm install; npm run build; npm run release` 以生成可加载的插件,如果你不是开发者请直接下载 Release。
+- 如果在使用插件时遇到问题,您可以通过 [发起 Issue](https://github.com/d0j1a1701/LiteLoaderQQNT-Markdown/issues/new) 向我们进行反馈。届时请尽可能附上诸如系统版本,插件列表, LiteLoaderQQNT 设置页版本信息截图等可以帮助分析问题的信息。
\ No newline at end of file
diff --git a/docs/dev/renderer.md b/docs/dev/renderer.md
index a1163cd..f5d7dfc 100644
--- a/docs/dev/renderer.md
+++ b/docs/dev/renderer.md
@@ -1,7 +1,11 @@
-Markdown rendering task has been moved to Renderer process.
+![React](https://img.shields.io/badge/React-blue?style=for-the-badge&logo=react&logoColor=white)![JavaScript](https://img.shields.io/badge/JavaScript-yellow?style=for-the-badge&logo=javascript&logoColor=white)![Typescript](https://img.shields.io/badge/TypeScript-blue?style=for-the-badge&logo=typescript&logoColor=white)![Webpack](https://img.shields.io/badge/Webpack-grey?style=for-the-badge&logo=react&logoColor=white)
+
+
# Introduction
+For how to clone and build this project, checkout the third method mentioned in [Installation Guide](/docs/plug_install.md)
+
## Bundling Using Webpack
All markdown rendering business is inside Renderer Process currently,
diff --git a/docs/plug_install.md b/docs/plug_install.md
new file mode 100644
index 0000000..1a69992
--- /dev/null
+++ b/docs/plug_install.md
@@ -0,0 +1,55 @@
+# 安装本插件
+
+这里列出三种安装本插件的方法。
+
+- 通过 [PluginInstaller](https://github.com/xinyihl/LiteLoaderQQNT-PluginInstaller/tree/main) 安装。(推荐)
+- 通过下载 Release 中提供的ZIP压缩文件进行安装。
+- 通过`git clone`直接克隆本项目。
+
+# 通过 PluginInstaller 安装
+
+> 正常情况下,推荐使用这种方式进行安装。
+
+首先确保您已经安装PluginInstaller插件,并进入该插件设置页。
+
+复制本项目`manifest.json`地址:
+
+```plaintext
+https://github.com/d0j1a1701/LiteLoaderQQNT-Markdown/blob/v4/manifest.json
+```
+
+![image](https://github.com/d0j1a1701/LiteLoaderQQNT-Markdown/assets/61616918/fa2caddd-ef69-4cb3-8181-7f8ba4744a7f)
+
+如图,将复制的链接粘贴到红色箭头处,点击确定即可。
+
+# 通过 Release 提供的文件进行安装
+
+进入本项目 [Relase](https://github.com/d0j1a1701/LiteLoaderQQNT-Markdown/releases) 界面,在最新的 Release 中,下载名为 `Release.zip` 的文件。
+
+![image](https://github.com/d0j1a1701/LiteLoaderQQNT-Markdown/assets/61616918/d70c7a9f-4cef-430b-9886-bb726d7d7b26)
+
+
+下载完成后,进入 LiteLoader 插件页,打开数据目录。
+
+![image](https://github.com/d0j1a1701/LiteLoaderQQNT-Markdown/assets/61616918/00ae01b8-856f-4b05-bcec-630d4f6f8c1c)
+
+创建名为 `markdown-it` 的文件夹,并把下载好的 Release.zip 解压到新创建的文件夹中既可。
+
+> 注意,解压时不要启用解压软件的 “解压到新文件夹中” 的选项。
+
+# 克隆本项目
+
+> 本方法仅推荐开发者使用。
+
+首先使用 `git clone` 克隆本项目。然后在项目目录下运行以下命令:
+
+```bash
+npm install
+npm run build
+```
+
+在这之后,项目文件夹便成为一个有效的本插件文件夹,同时你也可以进一步运行以下命令,生成与 Release 中相同的压缩包:
+
+```bash
+npm run release
+```
\ No newline at end of file