CodeSandBox/monaco-editor-lsp-next
2
0
Fork 0
mirror of https://github.com/cfngc4594/monaco-editor-lsp-next.git synced 2025-05-18 15:26:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
cfngc4594 2025-03-02 11:39:08 +08:00
parent efdf5089fa
commit fd7cf716f5
1 changed files with 39 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
README.md
View File

@ -2,56 +2,53 @@
# 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)
</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.
To change your WSL network mode, follow these steps:
1. Open WSL settings. ⚙️
2. Navigate to the "Network" section. 🌐
3. Change the network mode to "Mirrored". 🔄
#### 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. 💻
After completing these steps, the Monaco Editor should be able to connect to the LSP language servers without any problems. 🎉
Once these steps are completed, the Monaco Editor should connect smoothly to the LSP language servers. Enjoy! 🎉
## 🚀 Quick Start
## 🚀 Quick Start Guide
### 🐳 Using Docker (Recommended)
```sh
# Clone repository
# Clone the repository
git clone https://github.com/cfngc4594/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
```
### 🔧 Manual Setup
```sh
# Clone repository
# Clone the repository
git clone https://github.com/cfngc4594/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
# Install project dependencies using Bun package manager
# Install project dependencies using the Bun package manager
bun install
# Run the development server
# Launch the development server
bun run dev
```
@ -59,7 +56,25 @@ bun run dev
### LSP Server Settings
| **Language** | **LSP Server** | **Port** |
|----------------|------------------|------------|
| `C` | `clangd` | `4594` |
| `C++` | `clangd` | `4595` |
| **Language** | **LSP Server** | **Port** |
|--------------|----------------|----------|
| `C` | `clangd` | `4594` |
| `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).