一、环境准备

鸿蒙官方提供的构建完成的 Electron 框架包开发鸿蒙版本，inkdown代码仓地址

1、鸿蒙工具

• 鸿蒙官方开发工具DevEco Studio

  开发环境： Windows
  开发工具：DevEco Studio 下载地址
  

• 鸿蒙官方提供的构建完成的 Electron 框架包
  仓库地址：Electron-25.x版本

  通过切换分支可以查看支持的版本
  

下载所需 Electron 版本包后，本地解压。目录结构如下：
libelectron/
├── lib.unstripped/
└── ohos_hap/
├── AppScope/ --------------应用的配置内容
├── electron/
│ ├── build/
│ │ ├── default/
│ │ │ └── outputs/
│ │ │ └── default/
│ │ │ ├── electron-default-signed.hap --------------产物：hap包
│ │ │ ├── electron-default-unsigned.hap
├── web_engine/
│ ├── src/
│ │ ├── main/
│ │ │ └── resources/
│ │ │ └── resfile/
│ │ │ └── resources/
│ │ │ └── app/ --------------Electron 代码放置的位置

• IDE中完成应用的签名
  可以在官方文档查阅签名方式。当前使用的是个人签名，签名的步骤如下：

  
  
  首次可能会提示登录，可以登录后，按照此步骤完成应用签名。

2、inkdown代码

• 选择了 github 开源的优质Markdown 桌面编辑器项目：inkdown代码仓地址，拉取 tag v0.20.0 代码。

• 笔者所写时此项目最新代码使用的 Electron 版本为 35.4.0，鸿蒙版无此对应版本。通过浏览项目历史，发现 tag v0.20.0 使用的是 29.1.1，因为降级到 25 版本适配度更高，修改更小，故此选择了 25.x 版本的框架。使用 AI Cli 工具或者 AI IDE 将项目使用的 Electron 降级为 25.3.2。适配鸿蒙设备的代码仓地址

• 放置后目录结构如下：
  

• app 相当于一个完整的 Electron 项目，所以可以在 app 目录下执行：
  安装依赖：npm install
  启动运行：npm start

二、源代码本地运行问题及解决方法

1、开发者工具控制台报错 WebAssembly is not defined

原因：当前的 webview 环境不支持 WebAssembly 。shiki 1.1.17 不支持配置引擎默认为 wasm 环境，可以将这个依赖升级到最新版本，通过配置参数来指定加载的引擎类型为 JavaScript。

方法：升级 shiki 并修改 createHighlighter 参数。

文件位置：app/src/renderer/src/editor/utils/highlight.ts

	import {bundledLanguages, bundledThemes, createHighlighter, Highlighter, createJavaScriptRegexEngine} from 'shiki'
	import {configStore} from '../../store/config'
	import {runInAction} from 'mobx'
	
	export const codeThemes = new Set(Object.keys(bundledThemes))
	export const allLanguages = Object.keys(bundledLanguages)
	export const langSet = new Set(allLanguages)
	export let highlighter:Highlighter
	export const loadedLanguage = new Set<string>(['tex'])
	
	export const codeReady = async (allLanguage = false) => {
	  if (!codeThemes.has(configStore.config.codeTheme) && configStore.config.codeTheme !== 'auto') {
	    runInAction(() => {
	      configStore.config.codeTheme = 'auto'
	    })
	  }
	  highlighter = await createHighlighter({
	    themes: [
	      configStore.curCodeTheme
	    ],
	    langs: allLanguage ? allLanguages : ['tex'],
	    engine: createJavaScriptRegexEngine()
	  }).then((res) => {
	    try {
	      const theme = res.getTheme(configStore.curCodeTheme as any)
	      runInAction(() => {
	        configStore.config.codeBackground = theme.bg
	        configStore.codeDark = theme.type === 'dark'
	      })
	    } catch (e) {}
	    return res
	  })
	}

三、应用显示

四、致谢

感谢开源代码 Coder 的贡献 ！✿✿ヽ(°▽°)ノ✿