[Share code] MarkdownView

[mikael]

MarkdownView

MarkdownView is a Pythonista UI library component. It is a drop-in replacement for ui.TextView that supports both editing markdown tagged text and viewing it as HTML.

Features

• Integrated markdown editing and HTML viewing modes - end editing and HTML is shown, click somewhere on the HTML text and markdown editing starts in the same position.
• Markdown editing supported by additional keys. (Thanks JonB for help on Obj-C.)
• Implements ui.TextView API for easy integration to existing code.
• Customizable through attributes or CSS.

##Quick start

Download (from Github) both the MarkdownView.py script and this readme.md file into same directory, and you can run the script in Pythonista to view and try out editing this readme file.

Import MarkdownView as a module and use wherever you would use a TextView. Markdown text can be set and accessed with the text attribute. Implement a delegate with textview_did_end_editing or textview_did_change method to handle saving the contents - see the end of the MarkdownView.py file for an example.

[JonB]

another option would be to add a blank ui.View on top of your ui.TextView, with a background color set that has a low alpha. That is how I am adding line highlighting to my in pythonista debugger.

This requires some objc to get at the underlying textstorage. The code below is for the built in editor, but should work similar to a textview, except there is no gutterWidth. The yellow box is simply a custom View() with alpha 0.2.

[Phuket2]

@JonB , thanks. The blank ui looks a bit too complicated for me. I have Pygments working in a ui.webview now. Well, with no color. Not sure what I am doing wrong. Been basically copying the examples from the site. It's ok, it seems straight forward enough. I think very nice to know this lib also. I see I can also pass hl_lines to the formatter also. They are also not working yet. It will be something stupid I have done. Something is working because linenos work.
Anyway, this seems to be a good option given I don't need editing.

[JonB]

you might need the full=True for you formatter, otherwise you will,need to also load a css file.

[Phuket2]

@JonB , thanks. It's was the full = True. Presto, all working. Including the line numbers and line hilighting. It's a very power lib for doing this sort of thing. Thanks for all your help.
I am just using 'colourful' style, passed a range to hilte rows 18-23. Will pay around with more of the API.

[Phuket2]

@mikael , sorry long conversation on your share code. It went in a direction I didn't expect. But given I don't need editing this is great. The only bummer is that pygments is not a standard install for Pythonista

[JonB]

pygments is included in pythonista.

anyway, mikael MarkDownView is pretty neat. I really liked the use of the input accessory.

[Phuket2]

@JonB , well that makes sense. I hate making statements here. More wrong than right. I was sure I had checked for it, but maybe used a wrong case or something. But good to know it's included. I installed or reinstalled it using stash anyway 😱

[Phuket2]

@JonB , trying to create a small helper around pygments. Don't think it will be that useful to people, but will still share it when I am finished.
I know this sort of stuff you would just write inline, meaning you don't even have to think about it. But a lot of us, not there 😳

Anyway here is the gist

[mikael]

@Phuket2: no worries, you kept the thread visible for a while, and looks like some more people found the MarkdownView because of it.

@JonB: Thanks! I have been refactoring this a bit for a specific purpose, essentially splitting into two separate components, TextView for editing markdown and a WebView that can be touched and you get the corresponding caret position in the markdown text.

Plus I changed the implementation to be proxy-wrapped to get rid of manual relaying of properties and methods.

Plus used a swipe down gesture to hide the keyboard instead of a "Done" button (to get more room on the iPhone - plus, feels nice).

Let me know if these are of specific interest, and I will take the time to polish & document & publish.

But @JonB, where's pygments? Does it have some different name on Pythonista?

[JonB]

I do like the proxy wrapper - your previous post certainly opened my eyes on this subject, and will inform my own custom components in the future.

pygments should be in the standard library /site packages. import pygments should just work... at least in the beta version.

[mikael]

@JonB, no, no pygments here, and I think Sir Phuket did not find it either. Maybe we should put it on the wishlist.

[omz]

@mikael Hmm, are you sure? pygments should be included, and I'm fairly certain that was already the case in version 1.5 (or even 1.4).

[ccc]

Pygments v1.6 has been in Pythonista for more than an year and is still in the current release and the current beta on 4 different iOS devices here.

https://github.com/cclauss/pythonista-module-versions/blob/master/pythonista_module_versions.py Click the History button and look at comments in the oldest version from 04 Jan 2015.

[mikael]

@omz and all: My mistake. I could not find any documentation and the code completion did not offer up "pygments" - but if I just import it and run the script, it works - so it must be there somewhere. :-)

Regards,
The boy who cried wolf