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