shaps80/markdowntext

A native SwiftUI view for rendering Markdown text in an iOS or macOS app

MarkdownText

A native SwiftUI view for rendering Markdown text in an iOS or macOS app.

Preview

Sponsor

Building useful libraries like these, takes time away from my family. I build these tools in my spare time because I feel its important to give back to the community. Please consider Sponsoring me as it helps keep me working on useful libraries like these 😬

You can also give me a follow and a 'thanks' anytime.

Supported Markdown

• Headings
• Paragraphs
• Quotes
• Inline formatting
  • Strong/Bold
  • Emphasis/Italic
  • Strikethrough
  • Code
  • Links (non interactive only)
• Lists
  • Ordered
  • Unordered
  • Checklist (GitHub style)
• Thematic Breaks
• Code Blocks
• Images
  • A full backport of AsyncImage is included

Features

Style APIs

Adopting the familiar SwiftUI style-based APIs, you can customize the appearance of almost all markdown elements either individually or composed.

struct CustomUnorderedBullets: UnorderedListBulletMarkdownStyle {
    func makeBody(configuration: Configuration) -> some View {
        // you can also provide a completely new View if preferred 👍
        configuration.label
            .foregroundColor(.blue)
    }
}

You can even customize animations since the library is composed of 100% SwiftUI elements only.

struct ScaledImageStyle: ImageMarkdownStyle {
    // image will scale up as its loaded, moving content out of the way
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .transition(.scale)
    }
}

Modifiers for styling and visibility can also be placed anywhere in your SwiftUI hierarchy, just as you'd expect:

NavigationView {
    MarkdownText(markdown)
}
// Styling
.markdownQuoteStyle(.inset)
.markdownOrderedListBulletStyle(.tinted)
.markdownImageStyle(.animated)

// Visibility
.markdownCode(.visible)
.markdownThematicBreak(.hidden)

Demo App

A MarkdownText Demo is also available to better showcase the libraries capabilities.

Usage

Using the view couldn't be easier:

MarkdownText("Some **markdown** text")
LazyMarkdownText(someMassiveMarkdownText)

There's even a LazyMarkdownText view that loads its view's lazily for those cases where you need improved scrolling and loading performance.

Installation

You can install manually (by copying the files in the Sources directory) or using Swift Package Manager (preferred)

To install using Swift Package Manager, add this to the dependencies section of your Package.swift file:

.package(url: "https://github.com/shaps80/MarkdownText.git", .upToNextMinor(from: "1.0.0"))

markdowntext's Issues

would like to have markdownCodeSyntaxHighlighter to support

Feature Description

It would be beneficial to have a designated place for configuring the code syntax highlighter. This way, developers can easily modify the code highlighter as needed.

Problem Statement

I previously used CodeMarkdownStyle for this purpose, but it may not be ideal. For example, consider the code snippet below:

ScrollView(.horizontal, showsIndicators: true) {
    highlightCode(content: configuration.code, language: configuration.language)
        .padding(8)
}

In order to separate concerns and improve the overall structure:

Proposed Solution

Consider the following code snippet:

LazyMarkdownText(message)
    .markdownCodeSyntaxHighlighter(.splash(theme: some-theme))

InlineMarkdownConfiguration does not process new lines

General Information

Render new lines in paragraphs for a specific?(not sure) edge.

• Project version:
  commit hash: c5f5e3e7d2de5dbccd7756d6b4b3739fdf427c33

• Platform/OS version:
  MacOS 12.6

• IDE version:
  Xcode 14.2

• Devices:
  2017 Macbook Pro

• Any related GitHub issues:

Describe the bug

Rendering Paragraph text with \ new line markers

Steps to reproduce

text\
text2\
text3

Expected behavior

text
text2
text3

Simple Fix, but not sure if holistic enough

InlineStyle.swift

within struct InlineMarkdownConfiguration

starting if condition

if component.content.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
    return result = result + Text("\n")
} 

entire var body: some View

elements.reduce(into: Text("")) { result, component in
    if component.content.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
        return result = result + Text("\n")
    } else if component.attributes.contains(.code) {
        return result = result + code.makeBody(
            configuration: .init(code: component.content, font: font)
        )
    } else {
        return result = result + Text(component.content).apply(
            strong: strong,
            emphasis: emphasis,
            strikethrough: strikethrough,
            link: link,
            attributes: component.attributes
        )
    }
}

AttributedString

Can I use this package in a non SwiftUI project to get an AttributedString to use in a UILabel or UITextView?

How to configuration code block scroll vertical?

The default scroll direction of code block is horizontal, I want to set it to vertical. How to configure it?

I find source code can configure it. But how to use it?

public struct DefaultCodeMarkdownStyle: CodeMarkdownStyle {
    var axes: Axis.Set
    var showsIndicators: Bool

    /// Creates a new instance of this style
    /// - Parameters:
    ///   - axes: The scrollable axes
    ///   - showsIndicators: If `true`, scroll indicators will be visible when required
    public init(_ axes: Axis.Set = .horizontal, showsIndicators: Bool = false) {
        self.axes = axes
        self.showsIndicators = showsIndicators
    }

    public func makeBody(configuration: Configuration) -> some View {
        ScrollView(axes, showsIndicators: showsIndicators) {
            configuration.label
        }
    }
}```

How get text can be selected

1. How can I set the displayed text, which can be selected and copied.
2. In addition, the height of the code, is there any implementation method or idea.

Thanks for open source~

is it possible to make link interactive ?

Hi,
I'm trying your library for the first time
I notice as you mention ReadMe link is non interactive

is there a way to make link interactive, so when I tap on link ,it open Safari inside app ?

Is it possible to support table display?

Thx for the open source, it is absolutely a great library.
However I noticed that the table style is missing, it's kind of important for academic articles.

How to add a click to the link？

How to add a click to the link？

Won't compile for macOS projects

General Information

• Project version:

• Platform/OS version:

macOS 11+

• IDE version:

Xcode 14

Describe the bug

Compiling MackdownText in a macOS project fails with the SwiftUIBackports dependency calling UIScreen which is not present under macOS. https://github.com/shaps80/SwiftUIBackports/blob/d9842f24656ff7c6116dc207b60f0b6d302a5a9a/Sources/SwiftUIBackports/Shared/ImageRenderer/Renderer.swift#L7

Steps to reproduce

Create a new macOS SwiftUI project. Import MarkdownText. Add a simple `MarkdownText("<some_markdown") to your view.

Expected behavior

The README.md claims this is supported under macOS but the dependencies are not.

Screenshots

Additional context

Currently looking for an alternate to MarkdownUI for supporting markdown in a macOS project to run under macOS 11 or newer (so unable to take advantage of built in markdown capability)