如果希望在 WebView 中为应用程序添加代码高亮显示，有很多包可以帮助我们实现这一目标。我们可以尝试使用专为 Swift 构建的包，如 Highlightr 或 Splash，但这可能会使我们的代码变得复杂并影响视图的性能。
由于 WebView 基本上是一个 HTML 页面，我们可以简单地使用一个 JavaScript 包来实现这一目标。例如，Prism 或 Highlight.js，它们是最受欢迎的语法高亮显示包之一。
本教程中，我们将了解 Highlight.js。
什么是 Highlight.js？
Highlight.js 是一个 JavaScript 包，支持许多语言的代码高亮显示，包括 JavaScript、CSS、TypeScript 和 Swift。它还提供了 95 多种样式供我们选择。
确保在我们的应用程序中有一个 WebView。
然后，Markdown文本应该包含一个代码块：
var markdown = """
# Code highlighting in a WebView
When you build a site, it is important to respect the correct structure for your texts, images and buttons. That's because search engines will read your content and index it based on your structure. Some basic rules are:
- Every page needs an **h1** for title.
- Every page needs meta tags specifically for search engines: **title**, **description**, **keywords**, etc.
- Every image needs an **alt** properties to explain what the image is about. This is also great for accessibility.
```jsx
<img src="/images/logos/logo.svg" alt="logo" />
<h1>Design and code React apps</h1>
<p>
Don’t skip design. Learn design and code by building real apps with
React and Swift. Complete courses about the best tools.
</p>
在 parse 函数中，使用 head 和 body 包装我们的 HTML 内容。
func parse() -> String {
let parser = MarkdownParser()
let html = parser.html(from: markdown)
let htmlStart = "<HTML><HEAD></HEAD><BODY>"
let htmlEnd = "</BODY></HTML>"
return htmlStart + html + htmlEnd
}
Link to the style sheet
在 HEAD 标签之间，我们将添加以下链接，该链接将我们的 webView 链接到Highlight.js 的样式表，托管在内容传送网络（或CDN）上，并启用代码高亮的样式。
<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css\">
通过简单地将默认更改为所需的样式，可以轻松更改为另一个主题：
<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/atom-one-dark.min.css\">
我们可以在Highlight.js的演示页面上浏览可用的主题。
添加脚本
在 BODY 结束标签之前添加以下脚本行。这将连接到托管在 CDN 上的Highlight.js脚本，并初始化功能。
<script src=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js\"></script>
<script>hljs.highlightAll();</script>
最终带样式的代码
通过在 HTML 中查找所有代码标签的出现，然后使用 style 属性为其添加一些样式，可以为代码块添加样式。以下是在我的解析函数中的一个示例：
func parse() -> String {
let parser = MarkdownParser()
let html = parser.html(from: markdown)
let htmlStart = "<HTML><HEAD><link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/atom-one-dark.min.css\"></HEAD><BODY style=\"padding: 40px; font-size: 20px; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif\">"
let codeRegex = "<code.*?"
let contentWithCodeStyling = html.replacingOccurrences(of: codeRegex, with: "$0" + " style=\" margin-bottom: 20px; overflow: scroll; border-radius: 10px; padding: 20px; padding-right: 0; font-family: SF Mono,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif; font-size: 15px; font-weight: 500; line-height: 20px;", options: .regularExpression, range: nil)
let htmlEnd = "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js\"></script><script>hljs.highlightAll();</script></BODY></HTML>"
return htmlStart + contentWithCodeStyling + htmlEnd
}
最终结果将看起来像这样:
网友评论