NativeMarkKit

NativeMark is a flavor of Markdown designed to be rendered by native apps (i.e. it compiles down to native types, not HTML). Specifically, it implements the CommonMark spec with the significant exception of raw HTML tags. NativeMark will treat raw HTML tags as plain text.

The goal of NativeMark is to provide a simple, intuitive way to create styled text in native apps. NativeMarkKit is an implementation of NativeMark for macOS, iOS, and tvOS. NativeMarkKit supports dark mode, dynamic type, and SwiftUI where available.

Requirements

Swift 5.1 or greater
iOS/tvOS 9 or greater OR macOS 10.11 or greater

Installation

Currently, NativeMarkKit is only available as a Swift Package.

...using a Package.swift file

Open the Package.swift file and edit it:

Add NativeMarkKit repo to the dependencies array.
Add NativeMarkKit as a dependency of the target that will use it

// swift-tools-version:5.1

import PackageDescription

let package = Package(
  // ...snip...
  dependencies: [
    .package(url: "https://github.com/andyfinnell/NativeMarkKit.git", from: "1.0.0")
  ],
  targets: [
    .target(name: "MyTarget", dependencies: ["NativeMarkKit"])
  ]
)

Then build to pull down the dependencies:

$ swift build

...using Xcode

Use the Swift Packages tab on the project to add NativeMarkKit:

Open the Xcode workspace or project that you want to add NativeMarkKit to
In the file browser, select the project to show the list of projects/targets on the right
In the list of projects/targets on the right, select the project
Select the "Swift Packages" tab
Click on the "+" button to add a package
In the "Choose Package Repository" sheet, search for "https://github.com/andyfinnell/NativeMarkKit.git"
Click "Next"
Choose the version rule you want
Click "Next"
Choose the target you want to add NativeMarkKit to
Click "Finish"

Usage

...with views

The easiest way to use NativeMarkKit is to use NativeMarkLabel:

import NativeMarkKit

let label = NativeMarkLabel(nativeMark: "**Hello**, _world_!")

// Assuming myView is an NSView or UIView
myView.addSubview(label)

...with SwiftUI

NativeMarkKit has a basic SwiftUI wrapper around NativeMarkLabel called NativeMarkText:

import SwiftUI
import NativeMarkKit

struct ContentView: View {
    var body: some View {
         NativeMarkText("**Hello**, _world_!")
    }
}

...styling

NativeMarkKit provides a style sheet data structure so NativeMark can be customized to match the styling of the app. By default, NativeMarkLabel and NativeMarkText use the .default StyleSheet to control how NativeMark is rendered. You can modify .default to create a global, default style sheet, or you can .duplicate() .default to create a one off style sheet for a specific use case.

For example, if you wanted links to use a brand color, you could mutate the .default StyleSheet:

StyleSheet.default.mutate(inline: [
    .link: [
        .textColor(.purple)
    ]
])

The above code would cause all NativeMark text using the .default style sheet to render links in purple.

If you only wanted to do this for a specific NativeMarkLabel (or NativeMarkText) you can .duplicate() .default and pass in the new style sheet to the labels that want it.

let purpleLinksStyleSheet = StyleSheet.default.duplicate().mutate(inline: [
    .link: [
        .textColor(.purple)
    ]
])

Then when the NativeMarkLabel is created:

import NativeMarkKit

let label = NativeMarkLabel(nativeMark: "**Hello**, [Apple](https://www.apple.com)!", styleSheet: purpleLinksStyleSheet)

...links

By default NativeMarkKit will open links in the default browser when they are clicked/tapped on. If you want to provide custom behavior instead, you can provide a closure to the NativeMarkLabel.

import NativeMarkKit

let label = NativeMarkLabel(nativeMark: "**Hello**, [Apple](https://www.apple.com)!")
label.onOpenLink = { url in
    // your custom code here
    print("Opening \(url)")
}

Documentation

Acknowledgements

The NativeMarkKit project would like to acknowledge the work of the CommonMark project to document a standardized flavor of Markdown. NativeMarkKit's front end parsing is based on CommonMark's parsing strategy and the reference implementation CommonMark.js. Additionally, this project derives its suite of parsing tests from CommonMark's specs.

unnamedd / NativeMarkKit