liyanan2004 / markdownview

Rendering Markdown text natively in SwiftUI.

MarkdownView

MarkdownView is a Swift Package for rendering Markdown natively in SwiftUI.

Thanks to apple/swift-markdown, it can fully compliant with the CommonMark Spec.

Here is a preview :)

Supported Platforms

You can use MarkdownView in the following platforms:

• macOS 12.0+
• iOS 15.0+
• watchOS 8.0+
• tvOS 15.0+

Highlighted Features

• Fully compliant with CommonMark
• SVG rendering support
• Highly Customizable and Extensible
  • Fonts
  • Code Highlighter Themes
  • Tint Colors
  • Block Directives
  • Custom Images
• Fully Native SwiftUI implementations

Getting started

You can create a Markdown view by providing a Markdown-formatted string.

MarkdownView(text: "This is the Apple's **newly published** [swift-markdown](https://github.com/apple/swift-markdown)")

If your Markdown have check boxes, you can provide a Binding string.

@State var text = """
- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media
"""

MarkdownView(text: $text)

For more information, Check out Documentation

Further Customization

Font

You can set custom fonts or change text styles.

MarkdownView(text: "# H1 title")
    .font(.largeTitle.weight(.black), for: .h1)

Tint

Default tint color for code blocks and block quotes is the accent color.

You can customize them explicitly.

MarkdownView(text: "> Quote and `inline code`")
    .tint(.pink, for: .inlineCodeBlock)

Add Custom Providers

You can add your custom image providers and block directive providers to display your content.

To do that, first create your provider.

struct CustomImageProvider: ImageDisplayable {
    func makeImage(url: URL, alt: String?) -> some View {
        AsyncImage(url: url) {
            switch $0 {
            case .empty: ProgressView()
            case .success(let image): image.resizable()
            case .failure(let error): Text(error.localizedDescription)
            @unknown default: Text("Unknown situation")
            }
        }
    }
}

Then apply your provider to MarkdownView.

MarkdownView(text: markdownText)
    .imageProvider(CustomImageProvider(), forURLScheme: "my-image")

The implementation of the block directive is exactly the same way.

Todos

• watchOS support. (specifically watchOS 8.0+)
• Table support for iOS 15.0, macOS 12.0 and tvOS 15.0.
• Add support for font size adjustments using SwiftUI built-in .font(_:) modifier.
• Built-in image providers improvements.

Swift Package Manager

In your Package.swift Swift Package Manager manifest, add the following dependency to your dependencies argument:

.package(url: "https://github.com/LiYanan2004/MarkdownView.git", .branch("main")),

Add the dependency to any targets you've declared in your manifest:

.target(name: "MyTarget", dependencies: ["MarkdownView"]),

Dependencies

• apple/swift-markdown: Parse documents
• raspu/Highlightr: Highlight code on iOS and macOS.

markdownview's Issues

Detect raw URLs

The feature you want to get in MarkdownView
Detect raw URLs and make them clickable.

Describe that feature in detail
Currently raw URLs (e.g. https://google.com) are not clickable in MarkdownView.
I believe this feature is supported in https://github.com/gonzalezreal/swift-markdown-ui, but not this repo. It would be nice to support that.

请问下如何实现选中复制功能

请问下设置什么属性才能实现选中复制

Markdown view blink when text is short

Hi @LiYanan2004,

I just found an issue that markdown view blink while scrolling with short text. I guess the width has been recalculated somewhere. Please check below video for more details.

To Reproduce
Let use this code to reproduce:

import SwiftUI
import MarkdownView

struct ContentView: View {
    
    let textShort = """
    Hello 123
    """
    
    @State private var onHover = false
    var body: some View {
        ScrollView {
            LazyVStack {
                ForEach(0..<100, id: \.self) { i in
                    HStack {
                        MarkdownView(text: textShort)
                            .padding()
                            .background(.blue)
                            .frame(alignment: .leading)
                        Spacer()
                    }
                }
            }
        }
    }
}

Expected behavior
Markdown view should not blink with short text

Screenshots

CleanShot.2023-08-11.at.14.33.29-converted.mp4

Environment:

• OS and Version: macOS 13.5
• Simulator or Physical Device: Physical macOS
• Xcode version and build number: 14.3 (14E222b)
• Framework version/branch: main

Foreground Style per text type

The feature you want to get in MarkdownView

I'd like to render Dungeons & Dragons books using markdown. Some headers should use a different foreground style than others.

Describe that feature in detail

Just like you have font(_: Font, for: MarkdownFontProvider.TextType), I'd like a way to configure foreground styles such as foregroundStyle(_: some ShapeStyle, for: MarkdownFontProvider.TextType).

Additional context

My objective:

"Malloc: double free" issue when scroll

Describe the bug
Hello @LiYanan2004,

Thank you for the excellent package, I really appreciate it. I gave it a try and it seems quite impressive. However, I came across a problem as mentioned below:

(87710,0x16be9b000) malloc: double free for ptr 0x12d26f600
(87710,0x16be9b000) malloc: *** set a breakpoint in malloc_error_break to debug
(87710,0x16be9b000) malloc: Incorrect checksum for freed object 0x10d107a28: probably modified after being freed.
(87710,0x16be9b000) malloc: *** set a breakpoint in malloc_error_break to debug

Please see attached image for more details. Can you please help to check this problem? Thank you!

To Reproduce
Steps to reproduce the behavior:

1. Let have a scroll view of 100 MarkdownView elements, some elements have code block (in Swift or any languages).
2. Scroll up and down several times, the crash will happen with above issue.

Expected behavior
No crash when scroll.

Screenshots

Environment:

• OS and Version: macOS 13.2.1
• Simulator or Physical Device: MacBook Pro M1
• Xcode version and build number: 14.3

Unable to use an exact version

I can't seem to use an exact version of the package.
Is this normal?

在纯字符串下无法正常渲染

我发现用最新的 main 分支的代码，纯字符串或者是下面的这个这个用例渲染不出来内容， 空白

MarkdownView(text: "This is the Apple's **newly published** [swift-markdown](https://github.com/apple/swift-markdown)")

但是呢，前面加个 # 就开始有内容

MarkdownView(text: "# This is the Apple's **newly published** [swift-markdown](https://github.com/apple/swift-markdown)")

内容里面插入一段代码也没问题。

Originally posted by @JohannLai in #2 (comment)

Latex with standard $$

The feature you want to get in MarkdownView
I understand that latex is already possible using @latex, however if would be much more useful if one could write usual dollar sign notation such as

# headline

list 
- one
- two

$e^{-x}$

Describe that feature in detail
Do not require @latex and instead parse latex blocks as well as markdown.

Is that possible right now with some modifications?

Can get md block height

The feature you want to get in MarkdownView
get md block height like MarkdownView(text: "xxx")..onRendered { height in
print(height)
}

Additional context
in some case, we need to know the height of MarkdownView, so i wonder if we can add a new api

It is not possible to achieve a printer effect in a Stream mode similar to ChatGPT

MarkdownView(text: markdownText)

When using the Stream mode of the OpenAI API, the markdownText in the above code will change in real-time based on the content returned by the API. However, the updates on the UI cannot keep up with the addition of content and will have a delay of 1-3 seconds for updating large blocks of text, thus unable to achieve the typewriter effect.

MarkdownView sometimes crashes

Xcode version: 14.3
Platform: iOS 16.3.1

Problem: MarkdownView sometimes crashes. Seems to be some timing issue. I need to open and close the view that has MarkdownView back and forth to reproduce the issue. Seems to occur more often you move the app from background to foreground.

When debugging on device, the code crashes here:

Debug console prints a lot of warnings:
=== AttributeGraph: cycle detected through attribute xxxxxx ===

Could not find module 'MarkdownView' for target 'x86_64-apple-ios-simulator'

I am facing this issue. I have excluded arch arm64 in my build setting. Any idea how I can get rid of this issue?

Add accessibly annotations or a way to decorate headers and lists with them

The feature you want to get in MarkdownView
Add accessibly annotations or a way to decorate headers and lists with them

Describe that feature in detail
Currently items like headers and lists are just composed of native Text views and these render well and it looks great. But when read by VoiceOver, they are just read and not announced as ", heading" and lists do not have the ", in list" and "out of list" when the next element past the list is read, etc. Could additions be made to the library to either add these accessibility traits by default or a way to add them via something like the custom providers that exist for Image and Blocks now?

Behavior in different OS

• iOS / iPadOS: all text is read without any a11y annotations
• macOS: all text is read without any a11y annotations
• watchOS: not tested
• tvOS: not tested

Additional context
You can see the current reading behavior by bringing up anything in MarkdownView and then using the AccessibilityInspector or Voiceover to read it.

Latex support

The feature you want to get in MarkdownView
Dear @LiYanan2004 ,

Thank you once again for this great package. Do you have any plan to support Latex syntax?

这个库真的写的不错，提个代码复制的需求

请问下这里可以增加一个复制代码的按钮吗？

类似于这样：

MarkdownView 使用时报错

因为我之前使用过另一个叫做MarkdownText的框架，在那个框架中，我可以这样显示markdown内容：

import SwiftUI
import MarkdownText

struct SampleUI: View {
  var body: some View {
    ScrollView {
        MarkdownText("**Hello** there!")
    }
  }

所以我以为用您的这个框架也可以一样使用，我按照因此我写了下面这样的代码：

import SwiftUI
import MarkdownView

struct ContentView: View {
    var body: some View {
        MarkdownView("This is the Apple's **newly published** [swift-markdown](https://github.com/apple/swift-markdown)")

    }
}

但是并不能运行，共有3条报错

1. Cannot convert value of type 'String' to expected argument type 'NSCoder'
2. Missing argument label 'coder:' in call
3. Struct 'ViewBuilder' requires that 'MarkdownView' conform to 'View'
   我使用的是Xcode14.3版本。