查看“︁编辑指南”︁的源代码

# **Wiki.js 编辑风格提示文档**
🎯 悬浮提示框使用指南
先将以下代码注入页面-样式中
```
[data-tooltip] {
  position: relative;
  cursor: help;
  display: inline;
  text-decoration: none
}
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 80px;
  max-width: 800px;
  width: max-content;
  white-space: pre-line;
  word-wrap: break-word;
  overflow-wrap: break-word;
  background: #fff;
  color: #333;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  transition: all .2s ease
}
[data-tooltip]::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: all .2s ease
}
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible
}
@media (max-width:768px) {
  [data-tooltip]::before {
    max-width: 250px;
    left: 0;
    transform: translateX(0)
  }
}
  ```
- 基础使用
这是一个<span data-tooltip="这里是悬浮提示内容">悬停文字</span>。
- 多行提示
<span data-tooltip="第一行：重要说明
第二行：详细解释
第三行：补充信息">多行提示</span>
- 带颜色和样式
- <span data-tooltip="重要提醒" style="color: red;">红色警告</span>
- **<span data-tooltip="重点内容" style="color: blue;">蓝色重点</span>**
- <span data-tooltip="注意细节" style="background: yellow; padding: 2px 4px;">高亮提示</span>
## 产品功能说明
1. **智能识别** <span data-tooltip="基于AI技术，准确率99%">📊</span>
2. **快速处理** <span data-tooltip="处理速度比传统方法快10倍">⚡</span>
3. **安全可靠** <span data-tooltip="通过ISO 27001安全认证">🔒</span>
📝 基础Markdown语法速查
文字样式
<MARKDOWN>
# 一级标题
## 二级标题
### 三级标题
**粗体文字** 或 __粗体__
*斜体文字* 或 _斜体_
***粗斜体***
~~删除线文字~~
`行内代码`
列表
<MARKDOWN>
## 无序列表
- 项目一
- 项目二
  - 子项目
  - 子项目
## 有序列表
1. 第一项
2. 第二项
   1. 子项
   2. 子项
## 任务列表
- [ ] 未完成任务
- [x] 已完成任务
链接与引用
<MARKDOWN>
## 外部链接
[链接文本](https://example.com)
## 内部Wiki链接
[[页面名称]]
[[显示文本|页面名称]]
## 引用
> 这里是一段引用文字
> 
> 引用可以多行
## 脚注
这是一句话[^1]。
[^1]: 这是脚注内容。
表格
<MARKDOWN>
| 表头1 | 表头2 | 表头3 |
|-------|-------|-------|
| 内容1 | 内容2 | 内容3 |
| 左对齐 | 居中 | 右对齐 |
| :---  | :---: | ---: |
代码块
```语言名称
// 代码示例
function hello() {
  console.log("Hello World!");
}
```