Git Product home page Git Product logo

markdownview's Introduction

MarkdownView

CI Status Swift 5.2 Carthage compatible Version License Swift Package Manager compatible

MarkdownView is a WKWebView based UI element, and internally use markdown-it, highlight-js.

GIF

How to use

UIViewController

import MarkdownView

let md = MarkdownView()
md.load(markdown: "# Hello World!")

SwiftUI

import SwiftUI
import MarkdownView

struct SampleUI: View {
  var body: some View {
    ScrollView {        
      MarkdownUI(body: markdown)
        .onTouchLink { link in 
          print(link)
          return false
        }
        .onRendered { height in 
          print(height)
        }
    }
  }
  
  private var markdown: String {
    let path = Bundle.main.path(forResource: "sample", ofType: "md")!
    let url = URL(fileURLWithPath: path)
    return try! String(contentsOf: url, encoding: String.Encoding.utf8)
  }
}

Options

md.isScrollEnabled = false

// called when rendering finished
md.onRendered = { [weak self] height in
  self?.mdViewHeight.constant = height
  self?.view.setNeedsLayout()
}

// called when user touch link
md.onTouchLink = { [weak self] request in
  guard let url = request.url else { return false }

  if url.scheme == "file" {
    return false
  } else if url.scheme == "https" {
    let safari = SFSafariViewController(url: url)
    self?.navigationController?.pushViewController(safari, animated: true)
    return false
  } else {
    return false
  }
}

Experimental Features

This is not stable 🙇

Custom CSS Styling

Please check Example/ViewController/CustomCss.swift.

Plugins

Please check Example/ViewController/Plugins.swift. Each plugin should be self-contained, with no external dependent plugins.

Here is a sample project that builds markdown-it-new-katex as a compatible library.

Requirements

Target Version
iOS => 13.0
Swift => 5.2

Installation

MarkdownView is available through Swift Package Manager or CocoaPods or Carthage.

Swift Package Manager

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

Alternatively, you can add the package directly via Xcode.

CocoaPods

pod "MarkdownView"

Carthage

github "keitaoouchi/MarkdownView"

for detail, please follow the Carthage Instruction

Author

keita.oouchi, [email protected]

License

bootstrap is licensed under MIT license.
highlight.js is licensed under BSD-3-Clause license.
markdown-it is licensed under MIT license.

MarkdownView is available under the MIT license. See the LICENSE file for more info.

markdownview's People

Contributors

dependabot[bot] avatar keitaoouchi avatar stevearm avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

markdownview's Issues

How can I change text size

Hi, Please how can I change the text size in the viewer. I cant seem to find an option for that. Will it involve a code change?

Support for SPM?

This is not an issue, but since a lot of developers are moving towards the Swift Package Manager, it can save lot of time.

Can't load Image on MarkdownView

Hey Guys,

I have a problem with load image.
In the screenshot, we can see that the MarkdownView does not load the image, but the image exists on the folder.

Has anyone had the same problem as me? Could someone help me solve this bug, please?

screenshot 2018-10-16 at 12 56 022

table style

how to change table style, table for now only have top line, how to custom it to have full lines

Too slow in rendering big string

Hi I am using this library which is full filling almost every condition but the rendering is too slow if the MD String is big. Any fixes ?

And also it loads everything at once, can we load images asyc?

onRendered callback height is before when before height is larger than new actual height.

When embed in tableViewCell, need update everytimes after load markdown, but onRendered callback height is before when before height is larger than new actual height, so I add the below method to get the actual height

public func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        // 获取内容实际高度
        webView.evaluateJavaScript("document.body.scrollHeight") { [unowned self] (result, error) in
            DispatchQueue.main.async { [unowned self] in
                if let tempHeight: Double = result as? Double {
                    let height = CGFloat(tempHeight) + 10
                    debugPrint("height ==== \(height)")
                    self.onRendered?(height)
                }
            }
        }
    }

markdownView.load not working due to webkit networking problem

when I was trying the example code for how to use and run it on my phone, nothing appeared.
And I got this message from console:
2017-09-14 01:42:41.275511+0800 tableview[2394:521302] Could not signal service com.apple.WebKit.WebContent: 113: Could not find specified service
2017-09-14 01:42:41.276706+0800 tableview[2394:521302] Could not signal service com.apple.WebKit.Networking: 113: Could not find specified service

plz Any help?

No support empty line

if I input some string like below:

hello



world

what I expect is

hello

world

but the result from this library:

hello
world

I had try serval ways to resolve this, but all of that did not work.

Objective-c support?

I installed MarkdownView with pod to my objective-c project. But I couldn't run it. Do you support objective-c projects?
Thanks..

App got rejected because of keyword 'hotfix'

I have used this to render markdown content for a few projects and was able to launch without any problem before. But a recent new app submit got rejected and here's the response from Apple:

We notice that the app includes reference to hot fix in the MarkdownView framework. It would be appropriate to remove any reference to hot fix or the related functionality from the app. We look forward to reviewing your revised submission.

I found out that the 'hotfix' keyword is in the main.js file, and I'm not sure if it's entirely safe to remove it.

Error on master and SPM

Hi @keitaoouchi,

In ModuleSPM.swift htmlURL is defined as optional, but in MarkdownView it is used as non-optional. Project does not build

Best wishes,
Kristo

How can I enable Zoom In/out in MarkdownView

I integrated this library into our project, but it does not allow me to zoom in/out. Our contents have some images and that should be able to zoom in so that users can see the details(table image)

New release?

Hi @keitaoouchi,

I see some nice to have updates were published to master branch, is it possible to get those changes as a 1.7.2 release?
One could also use master branch for SPM, but would be nice to have a release for that.

Thank you for the great work!

Change background and text color

For my darkmode feature, I want to change background and text color of the markdown view.

How can I made that ?

I use MarkdownView 1.5.0with Swift 5

The onRendered return height is the same when I change the `markdownView.frame.width`.

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let markdownView = MarkdownView()
        markdownView.load(markdown: "....")
        self.view.addSubview(markdownView)
        markdownView.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: 0)
        markdownView.onRendered = { [weak self] height in
            guard let `self` = self else {
                return
            }
            print("height is \(height)")
        }
    }
}

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let markdownView = MarkdownView()
        markdownView.load(markdown: "....")
        self.view.addSubview(markdownView)
        markdownView.frame = CGRect(x: 0, y: 0, width: self.view.frame.width * 0.5, height: 0)
        markdownView.onRendered = { [weak self] height in
            guard let `self` = self else {
                return
            }
            print("height is \(height)")
        }
    }
}

The height is the same.

Superscript / subscript support?

Markdown-it supports superscripts and subscripts but it doesn't look like MarkdownView does - can we somehow get them working using this library or is it totally not supported?

Thanks!

Cannot load on GitHub files

Hi keitaoouchi,

I tried to replace a link for your README.md (https://github.com/keitaoouchi/MarkdownView/blob/master/README.md) and worked it. Most content was displayed, however, the GIF file was not loaded. Why?

import UIKit
import MarkdownView

class Example2ViewController: UIViewController {

  @IBOutlet weak var mdView: MarkdownView!

  override func viewDidLoad() {
    super.viewDidLoad()

    let session = URLSession(configuration: .default)
    let url = URL(string: "https://github.com/keitaoouchi/MarkdownView/blob/master/README.md")!
    let task = session.dataTask(with: url) { [weak self] data, _, _ in
      let str = String(data: data!, encoding: String.Encoding.utf8)
      DispatchQueue.main.async {
        self?.mdView.load(markdown: str)
      }
    }
    task.resume()
  }

}

iOS 13 (and 14?) view doesn't show well

iOS 13
Library v 1.9.1

  1. MarkdownUI's height stays zero.
  2. MarkdownUI.onRendered() callback doesn't receive anything.
  3. Also, MarkdownView.onRendered() callback doesn't receive anything.

Workaround
In version 1.8.x callbacks works well. So it can be fixed by defining MarkdownUI (presented in 1.9) with frame(height:) bound with onRendered(height).

Note
It's really critical. As the library normally needed for iOS 13 and 14. While iOS 15 already has built-in markdown for Text views (though features are limited yet...).

![](//xxx) image tag not work

import UIKit
import MarkdownView

class ViewControlle3: UIViewController {
  @IBOutlet weak var mdView: MarkdownView!
  
  override func viewDidLoad() {
    super.viewDidLoad()

    // not work
    mdView.load(markdown: "![](//dn-cnode.qbox.me/Fh2MIT1r4YStGl9ZEEzt7N4lEbqX)")
//    mdView.load(markdown: "![](//dn-cnode.qbox.me/Fh2MIT1r4YStGl9ZEEzt7N4lEbqX)", enableImage: true)
//    mdView.load(markdown: "![](http://dn-cnode.qbox.me/Fh2MIT1r4YStGl9ZEEzt7N4lEbqX)", enableImage: true)
  }
}

Compiled error

Swift version 4.2.1

at the latest version 1.5.0

screenshot:
2018-11-06 2 39 53

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.