docs(readme): improve README with detailed WSL setup and package compatibility info

This commit is contained in:
cfngc4594 2025-03-02 11:39:08 +08:00
parent efdf5089fa
commit fd7cf716f5

View File

@ -2,56 +2,53 @@
# monaco-editor-lsp-next # monaco-editor-lsp-next
✨ A Next.js integration of Monaco Editor with LSP support, free from SSR issues. ✨ A seamless Next.js integration of the Monaco Editor with robust LSP support all without SSR hassles.
![demo](demo.png) ![demo](demo.png)
</div> </div>
## ⚠️ Important Notice for WSL Users! ## ⚠️ Important Notice for WSL Users
If you're using Windows Subsystem for Linux (WSL), it's **crucial** to switch your network mode to "Mirrored". ### 🐧 WSL Network Configuration
Otherwise, the Monaco Editor might fail to connect to the LSP language servers. If you are using Windows Subsystem for Linux (WSL), it is **essential** to switch your network mode to **Mirrored**. Failing to do so may prevent the Monaco Editor from connecting to the LSP language servers due to potential IPv6 configuration conflicts.
This is typically due to IPv6 configuration issues. #### Steps to Switch to "Mirrored" Mode:
1. Open your WSL settings. ⚙️
2. Navigate to the **Network** section. 🌐
3. Change the network mode to **Mirrored**. 🔄
4. Restart WSL. 💻
To change your WSL network mode, follow these steps: Once these steps are completed, the Monaco Editor should connect smoothly to the LSP language servers. Enjoy! 🎉
1. Open WSL settings. ⚙️ ## 🚀 Quick Start Guide
2. Navigate to the "Network" section. 🌐
3. Change the network mode to "Mirrored". 🔄
4. Restart WSL. 💻
After completing these steps, the Monaco Editor should be able to connect to the LSP language servers without any problems. 🎉
## 🚀 Quick Start
### 🐳 Using Docker (Recommended) ### 🐳 Using Docker (Recommended)
```sh ```sh
# Clone repository # Clone the repository
git clone https://github.com/cfngc4594/monaco-editor-lsp-next git clone https://github.com/cfngc4594/monaco-editor-lsp-next
cd monaco-editor-lsp-next cd monaco-editor-lsp-next
# Start containers in detached mode # Build and start containers in detached mode
docker compose up -d --build docker compose up -d --build
``` ```
### 🔧 Manual Setup ### 🔧 Manual Setup
```sh ```sh
# Clone repository # Clone the repository
git clone https://github.com/cfngc4594/monaco-editor-lsp-next git clone https://github.com/cfngc4594/monaco-editor-lsp-next
cd monaco-editor-lsp-next cd monaco-editor-lsp-next
# Start specific containers (lsp-c and lsp-cpp) in detached mode # Build and start specific containers (lsp-c and lsp-cpp) in detached mode
docker compose up -d --build lsp-c lsp-cpp docker compose up -d --build lsp-c lsp-cpp
# Install project dependencies using Bun package manager # Install project dependencies using the Bun package manager
bun install bun install
# Run the development server # Launch the development server
bun run dev bun run dev
``` ```
@ -59,7 +56,25 @@ bun run dev
### LSP Server Settings ### LSP Server Settings
| **Language** | **LSP Server** | **Port** | | **Language** | **LSP Server** | **Port** |
|----------------|------------------|------------| |--------------|----------------|----------|
| `C` | `clangd` | `4594` | | `C` | `clangd` | `4594` |
| `C++` | `clangd` | `4595` | | `C++` | `clangd` | `4595` |
## 📦 Package Compatibility
### 🎨 Shiki API Deprecation Notice
The syntax highlighting feature relies on `rehype-pretty-code`, which uses the deprecated `getHighlighter` API from `shiki`. This API was removed as of `shiki@3.0.0+`.
**Key Details:**
- **Affected Component:** `src/components/mdx-preview.tsx`
- **Dependency Chain:** `rehype-pretty-code``shiki@legacy`
- **Version Constraints:**
```bash
"shiki": "<=2.5.0"
"@shikijs/monaco": "<=2.5.0"
```
**Developer Note:**
Although newer shiki versions (3.0.0+) have introduced `createHighlighter` and `getSingletonHighlighter` APIs, upgrading manually may disrupt functionality until `rehype-pretty-code` adapts to these changes. For updates, please monitor the [rehype-pretty-code repository](https://github.com/atomiks/rehype-pretty-code).