# WebviewMarkdownMath

**Repository Path**: scenario-samples/webview-markdown-math

## Basic Information

- **Project Name**: WebviewMarkdownMath
- **Description**: 【鸿蒙 Harmony Next 示例 代码】本项目基于Web组件，实现了一个支持Markdown格式渲染和MathJax公式渲染的页面展示工具。用户可以通过界面按钮控制文档的加载、清空、公式颜色调整、主题切换等操作，适用于教学、笔记、技术文档等场景。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-16
- **Last Updated**: 2025-07-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Webview同时渲染Markdown和数学公式

## 介绍

本项目基于Web组件，实现了一个支持**Markdown格式渲染**和**MathJax公式渲染**的页面展示工具。用户可以通过界面按钮控制文档的加载、清空、公式颜色调整、主题切换等操作，适用于教学、笔记、技术文档等场景。

## 效果预览
<img src="Screenshots/Preview.gif" width="200" />

## 约束与限制

* 本项目支持 API Version 16 Release 及以上版本。
* 本项目支持 HarmonyOS 5.0.4 Release SDK 及以上版本。
* 本项目依赖 DevEco Studio 5.0.4 Release 及以上版本进行开发与调试。

## 使用说明

1. 默认使用cdn加载js，需要手机拥有网络链接。
2. 在应用中点击“加载”按钮，将内容加载到 WebView 中。
3. 使用“设置公式颜色”按钮可自定义数学公式显示颜色。
4. 在应用中点击“清空”按钮，可以将 WebView 内容清空。

## 实现思路

### 1. WebView 集成

- 创建 Web 组件。
- 加载rawfile目录 HTML 页面并在`onPageEnd`建立和 HTML 的通信。
  ```TypeScript
  // 创建两个消息端口。
  this.ports = this.webviewController.createWebMessagePorts();
  
  // 发送端口
  this.webviewController.postMessage('__init_port__', [this.ports[0]], '*');
  ```

### 2. Markdown 渲染

- 引入 `marked.js` 实现 Markdown 解析。
- 在 WebView 中通过 JavaScript 调用 `marked.parse()` 方法进行解析。

### 3. MathJax 公式支持

- 引入 MathJax 库，配置为自动检测公式并渲染。
- 支持 LaTeX 公式语法。

### 4. 功能控制逻辑

- 通过主页面上的按钮触发对应的操作，如：
   - `渲染`：加载 Markdown 内容。
   - `清空`：清空当前内容。
   - `设置公式颜色`：设置公式颜色。

## 工程目录
```
├──entry/src/main/ets
│  ├──entryability
│  │  └──EntryAbility.ets                 // 程序入口类
│  └──pages
│     └──Index.ets                        // 主页
└──entry/src/main/resource                // 应用静态资源目录
```

## 参考文档

[Web 组件使用文档](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-component-overview?ha_source=sousuo&ha_sourceId=89000251)

[建立应用侧与前端页面数据通道](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-app-page-data-channel)

## 一份简单的问卷反馈

亲爱的Harmony Next开发者，您好！<br>
为了协助您高效开发，提高鸿蒙场景化示例的质量，希望您在浏览或使用后抽空填写一份简单的问卷，我们将会收集您的宝贵意见进行优化:heart:

[:arrow_right: **点击此处填写问卷** ](https://wj.qq.com/s2/19042938/95ab/)

<div style="text-align: left;">