MarkdownView 使用教程

MarkdownView 使用教程

MarkdownViewRendering Markdown text natively in SwiftUI.项目地址:https://gitcode.com/gh_mirrors/markd/MarkdownView

项目介绍

MarkdownView 是一个基于 WKWebView 的 UI 元素，内部使用 markdown-it 和 highlight-js 来渲染 Markdown 内容。该项目旨在帮助开发者轻松地在 iOS 应用中展示 Markdown 文本或文件，支持 SwiftUI 和 UIKit。

项目快速启动

安装

MarkdownView 可以通过 Swift Package Manager 或 CocoaPods 进行安装。

使用 Swift Package Manager

在 Package.swift 文件中添加依赖：

dependencies: [
    .package(url: "https://github.com/LiYanan2004/MarkdownView.git", from: "1.0.0")
]

使用 CocoaPods

在 Podfile 中添加：

pod 'MarkdownView'

基本使用

在 UIKit 中使用 MarkdownView：

import MarkdownView

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let mdView = MarkdownView()
        view.addSubview(mdView)
        
        mdView.load(markdown: "# Hello World")
    }
}

在 SwiftUI 中使用 MarkdownView：

import SwiftUI
import MarkdownView

struct ContentView: View {
    var body: some View {
        MarkdownUI(body: "# Hello World")
    }
}

应用案例和最佳实践

自定义 CSS 样式

你可以通过加载自定义 CSS 文件来改变 Markdown 的显示样式：

mdView.load(markdown: "# Hello World", css: "path/to/custom.css")

处理链接点击事件

你可以捕获并处理 Markdown 中的链接点击事件：

mdView.onTouchLink = { request in
    guard let url = request.url else { return false }
    if url.scheme == "https" {
        UIApplication.shared.open(url)
        return false
    }
    return true
}

典型生态项目

MarkdownView-Android

MarkdownView-Android 是一个类似的项目，适用于 Android 平台。它允许你在 Android 应用中展示 Markdown 文本或文件，支持 Compose。

安装

在 build.gradle 文件中添加依赖：

dependencies {
    implementation 'com.github.mukeshsolanki:MarkdownView-Android:2.0.0'
}

基本使用

val markdownView = findViewById<MarkdownView>(R.id.markdown_view)
markdownView.loadMarkdownFromUrl("https://example.com/sample.md")

通过这些模块的介绍和示例，你可以快速上手并充分利用 MarkdownView 项目。

MarkdownViewRendering Markdown text natively in SwiftUI.项目地址:https://gitcode.com/gh_mirrors/markd/MarkdownView