b2bchain区块链学习技术社区
本文介绍了如何封装一个支持LaTex的Markdown解析器求职学习资料，有助于帮助完成毕业设计以及求职，是一篇很好的资料。
对技术面试,学习经验等有一些体会，在此分享。
起因
最近在仿写一款优秀的写作软件，优秀的写作软件支持markdown的解析自然是一个必不可少的功能，在思考如何实现解析器的同时，恰好阅读了钟颖大佬出品的关于“代码编辑器”的技术文章，发现可以使用 WebView封装 markdown-it 和 highlightjs.org 一类的web项目，低成本地实现一个有着不错效果的CommonMark解析器。
实现过程
1. HTML文件创建
创建本地文件 index.html，并输入代码。页面中用到的js文件和资源需要后续创建和生成。<body>标签中唯一的<div>将用于后续插入通过 markdown-it渲染的代码，页面的样式布局通过css文件实现和优化。
<html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <link rel="stylesheet" href="./main.css" /> <script src="./main.js"></script> </head> <body> <div class="container" id="contents"></div> </body> </html>2. JS文件创建
创建本地文件 index.js，在文件中编写需要注入网页的js代码。
import hljs from 'highlight.js' import MarkdownIt from 'markdown-it' import emoji from 'markdown-it-emoji' import './../css/bootstrap.css' import './../css/gist.css' import './../css/github.css' import './../css/index.css' window.showMarkdown = (percentEncodedMarkdown, enableImage = true) => { if (!percentEncodedMarkdown) { return } const markdownText = decodeURIComponent(percentEncodedMarkdown) let markdown = new MarkdownIt({ html: true, breaks: true, linkify: true, highlight: function(code){ return hljs.highlightAuto(code).value; } }) if (!enableImage) { markdown = markdown.disable('image') } markdown.use(emoji) markdown.use(require('markdown-it-latex2img')) let html = markdown.render(markdownText) document.getElementById('contents').innerHTML = html let tables = document.querySelectorAll('table') tables.forEach((table) => { table.classList.add('table') }) let codes = document.querySelectorAll('pre code') codes.forEach((code) => { hljs.highlightBlock(code) }) }主要用到的js库有：
markdown-it：100％ CommonMark 语法解析
highlight.js：代码高亮
markdown-it-emoji：emoji语法支持
markdown-it-latex2img：基于服务器端的MathJax解析器
代码的基本逻辑主要是：
1.由于markdown格式的内容被传入时事先进行了编码操作，所以这里需要调用decodeURIComponent()函数对内容先进行解码。
2.使用 markdown-it别结合所需插件对内容进行渲染，更多关于 markdown-it的使用和插件支持，可以参考官方的API文档：《markdown-it 中文文档》。
3.将渲染后的代码插入 index.html页面的对应位置，并支持表格（内嵌功能）和代码高亮的显示。
3. 控件封装
业务逻辑：创建 WKWebView，并注入js代码（showMarkdown()函数调用）
关键代码：
public func load(markdown: String?, enableImage: Bool = true) { guard let markdown = markdown else { return } if let url = htmlURL { let templateRequest = URLRequest(url: url) let escapedMarkdown = self.escape(markdown: markdown) ?? "" let imageOption = enableImage ? "true" : "false" let script = "window.showMarkdown('(escapedMarkdown)', (imageOption));" let userScript = WKUserScript(source: script, injectionTime: .atDocumentEnd, forMainFrameOnly: true) let controller = WKUserContentController() controller.addUserScript(userScript) let configuration = WKWebViewConfiguration() configuration.userContentController = controller let wv = WKWebView(frame: self.bounds, configuration: configuration) wv.scrollView.isScrollEnabled = self.isScrollEnabled wv.translatesAutoresizingMaskIntoConstraints = false wv.navigationDelegate = self addSubview(wv) // 代码省略：布局约束、空间样式 // ... wv.load(templateRequest) } else { // TODO: raise error } } private func escape(markdown: String) -> String? { return markdown.addingPercentEncoding(withAllowedCharacters: CharacterSet.alphanumerics) }4. 资源文件打包
到此，代码层面的工作就可以结束了。
最后我们需要使用 Webpack工具将js应用程序打包成方便使用的静态资源，输出名为 main.js的文件，将其放置在 index.html文件相同的目录下。这里提供一个可供参考的配置文件：webpack.config.js。
写在最后
本文所描述的实现过程，主要参考了三方库 MarkdownView，因为需要支持LaTeX的解析，我稍微重写了showMarkdown函数，加入了 markdown-it-latex2img库的使用，能够将数学公式以图片的形式进行展示。过程中，还学习了 Webpack工具的使用和js静态资源的打包。Webview项目的封装能够为原生提供更丰富的功能，能够为复杂的业务实现提供更多的思路和扩展，希望本文能够对需要的人有所帮助。
参考资料：
Taio开发笔记
Webpack教程
markdown-it API文档
keitaoouchi/MarkdownView
起因
最近在仿写一款优秀的写作软件，优秀的写作软件支持markdown的解析自然是一个必不可少的功能，在思考如何实现解析器的同时，恰好阅读了钟颖大佬出品的关于“代码编辑器”的技术文章，发现可以使用 WebView封装 markdown-it 和 highlightjs.org 一类的web项目，低成本地实现一个有着不错效果的CommonMark解析器。
实现过程
1. HTML文件创建
创建本地文件 index.html，并输入代码。页面中用到的js文件和资源需要后续创建和生成。<body>标签中唯一的<div>将用于后续插入通过 markdown-it渲染的代码，页面的样式布局通过css文件实现和优化。
<html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <link rel="stylesheet" href="./main.css" /> <script src="./main.js"></script> </head> <body> <div class="container" id="contents"></div> </body> </html>2. JS文件创建
创建本地文件 index.js，在文件中编写需要注入网页的js代码。
import hljs from 'highlight.js' import MarkdownIt from 'markdown-it' import emoji from 'markdown-it-emoji' import './../css/bootstrap.css' import './../css/gist.css' import './../css/github.css' import './../css/index.css' window.showMarkdown = (percentEncodedMarkdown, enableImage = true) => { if (!percentEncodedMarkdown) { return } const markdownText = decodeURIComponent(percentEncodedMarkdown) let markdown = new MarkdownIt({ html: true, breaks: true, linkify: true, highlight: function(code){ return hljs.highlightAuto(code).value; } }) if (!enableImage) { markdown = markdown.disable('image') } markdown.use(emoji) markdown.use(require('markdown-it-latex2img')) let html = markdown.render(markdownText) document.getElementById('contents').innerHTML = html let tables = document.querySelectorAll('table') tables.forEach((table) => { table.classList.add('table') }) let codes = document.querySelectorAll('pre code') codes.forEach((code) => { hljs.highlightBlock(code) }) }主要用到的js库有：
markdown-it：100％ CommonMark 语法解析
highlight.js：代码高亮
markdown-it-emoji：emoji语法支持
markdown-it-latex2img：基于服务器端的MathJax解析器
代码的基本逻辑主要是：
1.由于markdown格式的内容被传入时事先进行了编码操作，所以这里需要调用decodeURIComponent()函数对内容先进行解码。
2.使用 markdown-it别结合所需插件对内容进行渲染，更多关于 markdown-it的使用和插件支持，可以参考官方的API文档：《markdown-it 中文文档》。
3.将渲染后的代码插入 index.html页面的对应位置，并支持表格（内嵌功能）和代码高亮的显示。
3. 控件封装
业务逻辑：创建 WKWebView，并注入js代码（showMarkdown()函数调用）
关键代码：
public func load(markdown: String?, enableImage: Bool = true) { guard let markdown = markdown else { return } if let url = htmlURL { let templateRequest = URLRequest(url: url) let escapedMarkdown = self.escape(markdown: markdown) ?? "" let imageOption = enableImage ? "true" : "false" let script = "window.showMarkdown('(escapedMarkdown)', (imageOption));" let userScript = WKUserScript(source: script, injectionTime: .atDocumentEnd, forMainFrameOnly: true) let controller = WKUserContentController() controller.addUserScript(userScript) let configuration = WKWebViewConfiguration() configuration.userContentController = controller let wv = WKWebView(frame: self.bounds, configuration: configuration) wv.scrollView.isScrollEnabled = self.isScrollEnabled wv.translatesAutoresizingMaskIntoConstraints = false wv.navigationDelegate = self addSubview(wv) // 代码省略：布局约束、空间样式 // ... wv.load(templateRequest) } else { // TODO: raise error } } private func escape(markdown: String) -> String? { return markdown.addingPercentEncoding(withAllowedCharacters: CharacterSet.alphanumerics) }4. 资源文件打包
到此，代码层面的工作就可以结束了。
最后我们需要使用 Webpack工具将js应用程序打包成方便使用的静态资源，输出名为 main.js的文件，将其放置在 index.html文件相同的目录下。这里提供一个可供参考的配置文件：webpack.config.js。
写在最后
本文所描述的实现过程，主要参考了三方库 MarkdownView，因为需要支持LaTeX的解析，我稍微重写了showMarkdown函数，加入了 markdown-it-latex2img库的使用，能够将数学公式以图片的形式进行展示。过程中，还学习了 Webpack工具的使用和js静态资源的打包。Webview项目的封装能够为原生提供更丰富的功能，能够为复杂的业务实现提供更多的思路和扩展，希望本文能够对需要的人有所帮助。
参考资料：
Taio开发笔记
Webpack教程
markdown-it API文档
keitaoouchi/MarkdownView
起因
最近在仿写一款优秀的写作软件，优秀的写作软件支持markdown的解析自然是一个必不可少的功能，在思考如何实现解析器的同时，恰好阅读了钟颖大佬出品的关于“代码编辑器”的技术文章，发现可以使用 WebView封装 markdown-it 和 highlightjs.org 一类的web项目，低成本地实现一个有着不错效果的CommonMark解析器。
实现过程
1. HTML文件创建
创建本地文件 index.html，并输入代码。页面中用到的js文件和资源需要后续创建和生成。<body>标签中唯一的<div>将用于后续插入通过 markdown-it渲染的代码，页面的样式布局通过css文件实现和优化。
<html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <link rel="stylesheet" href="./main.css" /> <script src="./main.js"></script> </head> <body> <div class="container" id="contents"></div> </body> </html>2. JS文件创建
创建本地文件 index.js，在文件中编写需要注入网页的js代码。
import hljs from 'highlight.js' import MarkdownIt from 'markdown-it' import emoji from 'markdown-it-emoji' import './../css/bootstrap.css' import './../css/gist.css' import './../css/github.css' import './../css/index.css' window.showMarkdown = (percentEncodedMarkdown, enableImage = true) => { if (!percentEncodedMarkdown) { return } const markdownText = decodeURIComponent(percentEncodedMarkdown) let markdown = new MarkdownIt({ html: true, breaks: true, linkify: true, highlight: function(code){ return hljs.highlightAuto(code).value; } }) if (!enableImage) { markdown = markdown.disable('image') } markdown.use(emoji) markdown.use(require('markdown-it-latex2img')) let html = markdown.render(markdownText) document.getElementById('contents').innerHTML = html let tables = document.querySelectorAll('table') tables.forEach((table) => { table.classList.add('table') }) let codes = document.querySelectorAll('pre code') codes.forEach((code) => { hljs.highlightBlock(code) }) }主要用到的js库有：
markdown-it：100％ CommonMark 语法解析
highlight.js：代码高亮
markdown-it-emoji：emoji语法支持
markdown-it-latex2img：基于服务器端的MathJax解析器
代码的基本逻辑主要是：
1.由于markdown格式的内容被传入时事先进行了编码操作，所以这里需要调用decodeURIComponent()函数对内容先进行解码。
2.使用 markdown-it别结合所需插件对内容进行渲染，更多关于 markdown-it的使用和插件支持，可以参考官方的API文档：《markdown-it 中文文档》。
3.将渲染后的代码插入 index.html页面的对应位置，并支持表格（内嵌功能）和代码高亮的显示。
3. 控件封装
业务逻辑：创建 WKWebView，并注入js代码（showMarkdown()函数调用）
关键代码：
public func load(markdown: String?, enableImage: Bool = true) { guard let markdown = markdown else { return } if let url = htmlURL { let templateRequest = URLRequest(url: url) let escapedMarkdown = self.escape(markdown: markdown) ?? "" let imageOption = enableImage ? "true" : "false" let script = "window.showMarkdown('(escapedMarkdown)', (imageOption));" let userScript = WKUserScript(source: script, injectionTime: .atDocumentEnd, forMainFrameOnly: true) let controller = WKUserContentController() controller.addUserScript(userScript) let configuration = WKWebViewConfiguration() configuration.userContentController = controller let wv = WKWebView(frame: self.bounds, configuration: configuration) wv.scrollView.isScrollEnabled = self.isScrollEnabled wv.translatesAutoresizingMaskIntoConstraints = false wv.navigationDelegate = self addSubview(wv) // 代码省略：布局约束、空间样式 // ... wv.load(templateRequest) } else { // TODO: raise error } } private func escape(markdown: String) -> String? { return markdown.addingPercentEncoding(withAllowedCharacters: CharacterSet.alphanumerics) }4. 资源文件打包
到此，代码层面的工作就可以结束了。
最后我们需要使用 Webpack工具将js应用程序打包成方便使用的静态资源，输出名为 main.js的文件，将其放置在 index.html文件相同的目录下。这里提供一个可供参考的配置文件：webpack.config.js。
写在最后
本文所描述的实现过程，主要参考了三方库 MarkdownView，因为需要支持LaTeX的解析，我稍微重写了showMarkdown函数，加入了 markdown-it-latex2img库的使用，能够将数学公式以图片的形式进行展示。过程中，还学习了 Webpack工具的使用和js静态资源的打包。Webview项目的封装能够为原生提供更丰富的功能，能够为复杂的业务实现提供更多的思路和扩展，希望本文能够对需要的人有所帮助。
参考资料：
Taio开发笔记
Webpack教程
markdown-it API文档
keitaoouchi/MarkdownView
部分转自互联网，侵权删除联系
最新评论