区块链技术博客
www.b2bchain.cn

如何封装一个支持LaTex的Markdown解析器求职学习资料

本文介绍了如何封装一个支持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

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » 如何封装一个支持LaTex的Markdown解析器求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们