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

最新推荐文章于 2024-05-21 20:33:10 发布

web守墓人

最新推荐文章于 2024-05-21 20:33:10 发布

阅读量826

点赞数 6

文章标签： golang wasm 前端

本文链接：https://blog.csdn.net/2301_76933862/article/details/138121495

版权

文章目录

背景

背景

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

环境相关

go 1.21.0

步骤

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
}

2. 编译为wasm

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

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

在这里插入图片描述

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>

wasm_exec.js

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

output.wasm

刚刚build出的产物

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

npm install -g serve
serve -s public

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

web守墓人

关注

6
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
【go语言】编写一款markdown解析插件，通过wasm给前端调用

markdownToHTML: 将输入的markdown文本转化为html。windows下，执行下面build，生成output.wasm。基本都能转换为对应的html标签，但是没有样式。
复制链接

扫一扫