fix: Issues fixes and doc improvements.

README.md

@@ -1,7 +1,9 @@
 # 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))
+[![GitHub Release](https://img.shields.io/github/v/release/d0j1a1701/LiteLoaderQQNT-Markdown?style=for-the-badge&logo=github)](https://github.com/Ikaleio/LiteLoaderQQNT-Markdown/releases)
+[![GitHub License](https://img.shields.io/github/license/d0j1a1701/LiteLoaderQQNT-Markdown?style=for-the-badge&color=blue)](https://github.com/Ikaleio/LiteLoaderQQNT-Markdown/blob/v4/LICENSE)
+[![GitHub last commit](https://img.shields.io/github/last-commit/d0j1a1701/LiteLoaderQQNT-Markdown?style=for-the-badge&logo=github)](https://github.com/Ikaleio/LiteLoaderQQNT-Markdown/commits/v4/)
+[![GitHub Issues or Pull Requests](https://img.shields.io/github/issues/d0j1a1701/LiteLoaderQQNT-Markdown?style=for-the-badge&color=rgb(50%2C180%2C50))](https://github.com/Ikaleio/LiteLoaderQQNT-Markdown/issues)
 
 
 ## 简介
@@ -110,6 +112,17 @@ Normal test with HTML Entities & " ' < > .
 
 如果在使用插件时遇到问题，您可以通过 [发起 Issue](https://github.com/d0j1a1701/LiteLoaderQQNT-Markdown/issues/new) 向我们进行反馈。届时请尽可能附上诸如系统版本，插件列表， LiteLoaderQQNT 设置页版本信息截图等可以帮助分析问题的信息。如果你还安装了远程调试插件，可以再附上 Devtools 信息。
 
+## Contributors
+
+[![](https://contrib.rocks/image?repo=Ikaleio/LiteLoaderQQNT-Markdown)](https://github.com/Ikaleio/LiteLoaderQQNT-Markdown/graphs/contributors)
+
+## Star History
+
+![Stargazers over time](https://starchart.cc/Ikaleio/LiteLoaderQQNT-Markdown.svg?variant=adaptive)
+
+
+如果您觉得本项目对您有帮助，可以帮忙点一下Star，谢谢！
+
 ## Contributing
 
-如果您想要为本项目贡献代码，或者想了解本项目的代码相关细节，欢迎阅读 [项目开发文档](/docs/dev/renderer.md) 。
+如果您想要为本项目贡献代码，或者想了解本项目的代码相关细节，欢迎阅读 [项目开发文档](/docs/dev/renderer.md) 。

docs/dev/msg_rendering_process.md

@@ -9,11 +9,32 @@
 
 # Workflow
 
-Currently the plugin does NOT rendering all content inside a message box. We only deal with contents that may need go through the markdown renderer. Also, since some element should NOT be considered as Markdown when rendering and should keep what it look like throughout the rendering, we introduced the concept of **Fragement Processor**(FragProcessor).
+Currently the plugin does NOT rendering all content inside a message box. We only deal with contents that may need go through the markdown renderer. Also, since some element should NOT be considered as Markdown when rendering and should keep what it look like throughout the rendering, we introduced the concept of **Fragment Processor** _(FragProcessor)_.
 
 ## Fragments
 
-As you see, we **consider the `childern` of the message box as a "fragment"**. Then we have **a list of `FragProcessor`, each takes in charge of render a certain type of fragments**.
+When dealing with QQNT messages, we considered a message `span` as a basic rendering unit. A general QQNT message HTML element has the folloing structure:
+
+```
+- span.mix-message__inner
+  - span.text_element
+    - span / p / ...
+  - span.text_element_at
+  - span.other_element
+```
+
+In conclusion:
+
+- A `span.mix-message__inner` is related to a single message box, we will use `msgBox` to refer to it below.
+- A `msgBox` could have multiple `span.*_element_*` span, which's classname indictas the content type of this span, for example, a pure text, an emoji or a image etc.
+
+Here, we **consider the `span` children of the msgBox as the "fragments" of this message**. Then we have **a list of `FragProcessor`, each takes in charge of catching and rendering a certain type of fragments**.
+
+For example, we could have:
+
+- `TextFragProcessor` who deal with `span.text-element` fragments.
+- `EmojiFragProcessor` who deal with emoji info in fragments.
+- ...
 
 ## Fragment Processor
 
@@ -27,7 +48,7 @@ type FragmentProcessFunc = (
 ) => FragmentProcessFuncRetType | undefined;
 ```
 
-When `render()` function is triggered, a provided list of Fragment Processor will be iterated from begin to end **respectively and preemptively**.
+When `render()` function is triggered, for **each fragment** in each message, a **provided list of Fragment Processor** will be iterated from begin to end **respectively and preemptively**.
 
 This means, for a single fragment, once a processor successfully returned a not `undefined` value *(actually it should be `FragmentProcessFuncRetType` obejct)*, the loop is end and the return value is used for this fragment.
 
@@ -46,7 +67,7 @@ interface FragmentProcessFuncRetType {
 
 As you see, it specified the `original` SPAN element, and a new `rendered` element. For now, we just replace the `original` child of `messageBox` with `rendered`.
 
-> **Notice**
+> [!note]
 >
 > Keep in mind that the `original` HTML element passed to Fragment Processor could be directly updated. 
 > 
@@ -87,4 +108,4 @@ For more info about the process, check out source code file:
 
 For outdated doc:
 
-- [Message Rendering Process Doc 2.3.5](./msg_rendering_process_2.3.5.md)
+- [Message Rendering Process Doc 2.3.5](./msg_rendering_process_2.3.5.md)

docs/known_issue.md

@@ -1,15 +1,5 @@
 This document is used to record some Known Issue of this plugin.
 
-# Compatability Issue With Other Plugin
-
-Currently we found that sometimes it would cause incorrect rendering behaviour when using this plugin with `LiteTools`(another QQNT plugin). And user may experience:
-
-- Incorrect LiteTools Slot rendering position. For example, the *Message Send Time* and *Withdrawed* slot may be rendered with incorrect position / alignment.
-
-Currently the workaround for the LiteTool Time slot is to use JavaScript to observe the `offsetHeight` of each message box. If it over a specific value, we consider this message a multiple-line message and set the `flex-direction: column` to the root message box, otherwise set `flex-direction: row`.
-
-This require change message box div into `flex` which may cause other rendering issue, and this workaround should be replaced by a better solution.
-
 # Post Rendering Function Exec Order Issue
 
 Currently, we call `renderSingleMsgBox()` function inside `render()`, then after we call some post-rendering functions, the whole process is like: 
@@ -26,4 +16,4 @@ elementDebugLogger();
 
 However the issue is the *MarkdownIt* render function returns Promise, so the `renderSingleMsgBox()` is an async function. And so, the post-rendering function below actually may run first while the message is not fully rendererd.
 
-Currently we do NOT implement any workaround on this since the test show this issue don't affect the rendering result for now. However this is something that should be fixed in the future.
+Currently we do NOT implement any workaround on this since the test show this issue don't affect the rendering result for now. However this is something that should be fixed in the future.

src/components/code_block.jsx

@@ -33,7 +33,7 @@ export function HighLightedCodeBlock({ content, lang, markdownItIns }) {
         mditLogger('error', `hljs error:`, e);
     }
 
-    return (<pre className='hljs hl-code-block'>
+    return (<pre className='hljs hl-code-block mdit-fenced-code-block'>
         <button className='lang_copy'>
             <p className='lang'>{lang}</p>
             <p className='copy'>复制</p>

src/style/markdown.css

@@ -193,4 +193,17 @@ button.mdit-show-origin-button {
     padding-inline: 2px;
     /* text-underline: auto; */
     border-width: 0px;
+}
+
+pre.mdit-fenced-code-block>code {
+    width: 100%;
+    display: block;
+    overflow-y: auto;
+    scrollbar-width: thin;
+}
+
+@media (prefers-color-scheme: dark) {
+    pre.mdit-fenced-code-block>code {
+        color-scheme: dark;
+    }
 }