WKWebView Markdown 转换 Html

有时候，需要将 Markdown 转换为 HTML 代码，然后在WebView 中展示，这时候可以看看这篇博客。

Markdown Code

Markdown 是一种轻量级的文本样式格式，非常易于使用。例如，GitHub上的所有 README 都是用 Markdown 编写的。这里我们温故下 Markdown 语法:

首先，我们将使用 GitHub Guides 中的示例 Markdown 文本，并将其转换为 HTML 代码。

# An exhibit of Markdown

This note demonstrates some of what [Markdown][1] is capable of doing.

*Note: Feel free to play with this page. Unlike regular notes, this doesn't automatically save itself.*

## Basic formatting

Paragraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.

Paragraphs must be separated by a blank line. Basic formatting of *italics* and **bold** is supported. This *can be **nested** like* so.

## Lists

### Ordered list

1. Item 1
2. A second item
3. Number 3
4. Ⅳ

*Note: the fourth item uses the Unicode character for [Roman numeral four][2].*

### Unordered list

* An item
* Another item
* Yet another item
* And there's more...

## Paragraph modifiers

### Code block

    `Code blocks are very useful for developers and other people who look at code or other things that are written in plain text. As you can see, it uses a fixed-width font.`

You can also make `inline code` to add code into other things.

### Quote

> Here is a quote. What this is should be self explanatory. Quotes are automatically indented when they are used.

Convert Markdown into HTML

要将 Markdown 文本转换为 HTML，我们需要使用一个名为 Ink 的包，这是一个用 Swift 编写的专门用于此目的的包。

我们可以使用 Swift Package Manager 和 GitHub 存储库（https://github.com/JohnSundell/Ink）添加该包。

接下来，我们创建一个名为 ParseContent.swift 的新文件。

创建类：

// ParseContent.swift
class ParseContent {

}

在文件顶部导入 Ink。

// ParseContent.swift
import Ink

该类中，我们将 Markdown文本保存到一个多行字符串中。然后，我们使用 Ink 包将 Markdown 转换为 HTML。

// ParseContent.swift
let parser = MarkdownParser()
let html = parser.html(from: markdown)

创建WebView

创建一个名为 WebView.swift 的新文件，其中包含以下WebView 结构：

import SwiftUI
import WebKit

struct WebView : UIViewRepresentable {
    var html: String

    func makeUIView(context: Context) -> WKWebView  {
        return WKWebView()
    }

    func updateUIView(_ webView: WKWebView, context: Context) {
        webView.loadHTMLString(html, baseURL:  nil)
    }

}

接下来，只需要调用 WebView struct 并传递 html 字符串作为参数，即可获取 HTML 页面。

// ContentView.swift

@State var htmlContent: String = ""

var body: some View {
        WebView(html: htmlContent)
                .onAppear() {
                        htmlContent = ParseContent().parse()
                }
}

Add some styling to your WebView

默认情况下，WebView 中呈现的 HTML 将使用 Times New Roman 字体。为了对其进行样式化，我们使用内联 CSS 为 WebView 添加样式。

在 parse() 函数中，我们将在一个带有样式的 div 中包装 HTML。

func parse() -> String {
        let parser = MarkdownParser()
        let html = parser.html(from: markdown)

        let htmlStart = "<div style=\"padding: 40px; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif\">"
        let htmlEnd = "</div>"

        return htmlStart + html + htmlEnd
}

在上述代码中，我们在 div 上添加了填充（padding），并将字体系列更改为默认的 Apple 系统字体，即 SF Pro。

我们可以根据需要为 HTML 添加样式，还可以使用正则表达式来为特定标签（如h1）添加样式，通过使用正则表达式表达并替换所有出现的内容，如下所示：

let titleRegex: String = "<h1.*?"
let titleContent = html.replacingOccurrences(of: titleRegex, with: "$0" + " style=\"color: blue; font-size: 40px", options: .regularExpression, range: nil)

2023.12.22 18:32
上海 虹桥