【go语言】编写一款markdown解析插件，通过wasm给前端调用_golang wasm

作者：秋刀鱼在做梦 | 2024-07-03 22:31:32

踩

golang wasm

文章目录

背景

背景

wasm作为一种通用的文件格式，可以通过编程语言A实现一个功能，给语言B调用。那么，接下来，通过go语言实现一个markdown转html的功能插件，然后在html中调用。

环境相关

go 1.21.0（window10测试通过）
linux下vscode会报错：imports syscall/js: build constraints exclude all Go files in /home/coder/sdk/go1.22.3/src/syscall/js, 编译先指定架构使用GOOS=js GOARCH=wasm go build -o dist/output.wasm

步骤

1. 编写main.go

markdownToHTML: 将输入的markdown文本转化为html。

package main

import (
	"github.com/russross/blackfriday/v2"
	"syscall/js"
)

func markdownToHTML(this js.Value, inputs []js.Value) interface{} {
	markdown := inputs[0].String()
	html := blackfriday.Run([]byte(markdown))
	return js.ValueOf(string(html))
}

func registerCallbacks() {
	js.Global().Set("markdownToHTML", js.FuncOf(markdownToHTML))
}

func main() {
	c := make(chan struct{}, 0)

	registerCallbacks()

	<-c
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

2. 编译为wasm

windows下，执行下面build，生成output.wasm

set GOOS=js
set GOARCH=wasm
go build -o build\output.wasm
1
2
3

在这里插入图片描述

3. 编写前端代码，目录结构如下

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown to HTML</title>
</head>
<body>
<button onclick="convertMarkdown()">Convert</button>
<div style="display: flex;width: 100%;justify-content: space-around">
    <textarea style="width: 48%" id="markdown-input" cols="80" rows="10"># Hello, Markdown!</textarea>
    <div style="width: 48%" id="html-output"></div>
</div>
<script src="wasm_exec.js"></script>
<script>
    const go = new Go();
    let mod, inst;
    WebAssembly.instantiateStreaming(fetch('output.wasm'), go.importObject).then((result) => {
        mod = result.module;
        inst = result.instance;
        go.run(inst);
    });

    async function convertMarkdown() {
        const markdownInput = document.getElementById('markdown-input').value;

        const markdownToHTML = globalThis.markdownToHTML;
        const htmlOutput = markdownToHTML(markdownInput);

        console.log(htmlOutput)

        document.getElementById('html-output').innerHTML = htmlOutput;
    }
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

wasm_exec.js

从你本地 GO安装目录\misc\wasm\下复制
1

output.wasm

刚刚build出的产物
1

打开静态服务器，查看最终效果

npm install -g serve
serve -s public 
1
2

访问127.0.0.1:3000
基本都能转换为对应的html标签，但是没有样式。
ok一个小功能就完成了。
在这里插入图片描述

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】