uitextviewnsattributedstringtextkitnslayoutmanagernstextstorage

How can I replicate GitHub's app code block style in UITextView?

I am trying to create a markdown editor for fun and because I was interested in learning TextKit. I am working on iOS devices only, so I only have UIKit framework at my disposal, also I watched this WWDC18 video which explains some best practices to adopt with TextKit. At first I was really interested in knowing how to get the same result that the video shows at 22:13.

The code shown by the dev in the video makes use of AppKit and it wraps code in that rectangle by replacing the code section with a NSMutableParagraphStyle and by providing a custom NSTextBlock to the latter. As you can guess, I can't subclass NSTextBlock in UIKit and therefore I can't replicate the example shown.

I have something a little bit harder to ask though, what I really wanted to replicate is the GitHub application code block style, this is the final result that I would like to replicate:

enter image description here

As you can see it should have a rounded rectangle with a custom background color and also it needs to be scrollable in order to make code expand as much as it needs (I am not interested in syntax highlighting).

How can I achieve something like this if NSTextBlock is not available in UIKit?

For the moment all I have done is override NSTextStorage to set the correct font to the code section with custom NSAttributedString.

Solution

  • I have investigated in the app and noticed that it is managed by Ryan Nystrom which is the creator of GitHawk prior to moving to GitHub. The GitHawk markdown reader is very similar to the one that you find in the GitHub application and the funny thing is that GitHawk is open source so I took a look at that code and tried to understand how that could be replicated.

    Turns out that GitHawk heavily uses IGListKit framework and parses markdown in ListDiffable elements, specifically the code blocks ListDiffables are given to a ListSectionController that created an horizontal UIScrollView to display code.

    I gave up trying to understand more on this because GitHawk code is really really entangled and it is really hard, near impossible, to extract the specific functionality.