M2mobi - Waarom nóg een Markdown parser? Introductie van MarkyMark een Markdown parser voor iOS
Alle blogs Posted on 29 June 2017

Waarom nóg een Markdown parser? Introductie van MarkyMark een Markdown parser voor iOS

Sterke content behoort tot een van de succesfactoren van een app. Het ontwikkelen van apps met goede content brengt een aantal uitdagingen met zich mee. Zo zijn er veel mensen betrokken bij het maken van content, ieder met hun eigen behoeften en verantwoordelijkheden. Onze ontwikkelaars willen snelle native apps bouwen. Onze designers willen verantwoordelijk zijn voor de manier waarop content wordt getoond en onze klanten willen de content beheren en aanpassen. Markdown, een vereenvoudigde opmaaktaal voor content editors, is hier een mooie oplossing voor. We zijn op zoek gegaan naar een passende Markdown parser die de content van de klant kan weergeven in onze native apps, exact op de manier waarop onze designers voor ogen hebben. Na een lange zoektocht stelden we ons de vraag: kunnen we niet beter onze eigen Markdown parser ontwikkelen?

Wat is Markdown?

Onze klanten creëren doorgaans veel content. Met behulp van Markdown kunnen zij deze content gemakkelijk bewerken en stylen in een Content Management Systeem (CMS), zonder gebruik te hoeven maken van HTML. Markdown maakt gebruik van leestekens en karakters waar onze klanten meestal al mee bekend zijn, zodat zij zich niet hoeven te verdiepen in ingewikkelde HTML-codes. Daarnaast is Markdown een veilige manier van content editing en stelt het gebruikers niet in staat de styling aan te passen. Headers veranderen dus niet ‘per ongeluk’ van kleur. Een aantal voorbeelden van Markdown:

  • Je schrijft de belangrijkste titel als: “# Hoofd titel van de pagina”
  • Je schrijft de sub titel met twee hashtags: “## Sub titel van het artikel”
  • Je maakt een lijst door een streepje of een sterretje: “- Lijst item”

img Markymark markdown example

Markdown syntax (de code die een bepaalde programmeertaal hanteert) is een stuk gemakkelijker te begrijpen dan het schrijven van tekst in HTML. Daarnaast heeft Markdown het voordeel van het behouden van een consistent ontwerp over alle pagina’s van een app. Voor onze apps is Markdown daarom een perfecte oplossing. Onze klanten kunnen de content gemakkelijk toevoegen en bewerken en onze designers kunnen een consistent ontwerp bewaken. Het struikelblok zat het hem voor ons in het vinden van een zogeheten Markdown parser die de styling van de content van onze klanten ook netjes kan weergeven in onze native apps.

“People who edit content should focus on the words and the designer should make them pretty.” - Kirk Strobeck whatismarkdown.com

Onze ervaring met bestaande parsers

Als ik aan anderen vertel dat we onze eigen Markdown parser ontwikkelen krijg ik meestal de vraag: waarom gebruik je niet gewoon een van de bestaande parsers? Het antwoord is simpel… We hebben er heel veel uitgeprobeerd en liepen tegen een aantal problemen aan:

  • Markdown heeft verschillende flavors. Een flavor is een variatie op een al bestaande Markdown syntax. Diverse ontwikkelaars en platforms (zoals github) bieden hun eigen Markdown flavor aan met aanvullende features. De al bestaande Markdown parsers ondersteunen meestal slechts één, vaak incomplete flavor.
  • Veel bestaande parsers hebben beperkte styling mogelijkheden als het gaat om een specifieke layout, spacing, opsommingslijsten en typografie. Een punt wat voor onze apps heel erg belangrijk is.
  • Veel Markdown parsers converteren naar HTML, wat vaak erg traag en niet native is.
  • Velen verschillen in layout tussen Android en iOS.
  • Geen of slechte ondersteuning voor het laden en cachen van externe afbeeldingen.
  • Ondersteuning van interactieve elementen of video is er niet.

Onze parser: MarkyMark

Door onze lange ervaring met Markdown heb ik een goed beeld gekregen bij alle do’s en dont’s van een goede Markdown parser. Al deze do’s en dont’s hebben we meegenomen bij de ontwikkeling van onze eigen parser, MarkyMark. In ons technisch ontwerp hebben we een aantal punten voorop gesteld: de parser moet niet alleen snel, maar ook gemakkelijk te gebruiken, aan te passen en uit te breiden zijn. Bij het ontwikkelen van een Markdown parser is vrijwel alles variabel. Markdown maakt geen gebruik van een standaard syntax. Er zijn veel manieren om Markdown content te weergeven minstens zo veel manieren waarop designers de content kunnen stylen. Wij hebben onze parser daarom verdeeld in drie layers, welke allemaal gemakkelijk aan te passen zijn: flavor, layout en style.

img MarkyMark flavor layout style

Flavor

Eerder legde ik al uit dat een flavor een variatie is op een al bestaande Markdown syntax. In deze layer bepaal je met welke markdown tags en syntax je gaat werken. Werk je bijvoorbeeld met onze ContentfulFlavor, dan schrijf je een vetgedrukte tekst tussen twee sterretjes: *voorbeeld* wordt dus weergeven als voorbeeld. De wijze waarop we dit in Markdown schrijven noemen we ook wel een regel. Onze library stelt ons in staat nieuwe flavors te ontwikkelen waarin zowel nieuwe als reeds bestaande regels in worden meegenomen. Als je bijvoorbeeld een regel maakt die tekst herkent wanneer deze tussen twee _underscores_ staat, kan je deze combineren met regels van al bestaande flavors. Sterretjes in combinaties met underscore wordt dus: voorbeeld.

Layout

De layout layer van MarkyMark betreft de wijze waarop de pagina die de content weergeeft is opgemaakt (native, HTML, hybrid, et cetera). Tot op heden hebben we alleen een native layout layer geïmplementeerd, omdat we bij M2mobi alleen native apps ontwikkelen. Als we in de toekomst Markdown als HTML zouden moeten weergeven, kunnen we een nieuwe layout layer ontwikkelen die dit ondersteund. Ook als Apple of Google nieuwe mogelijkheden naar buiten brengt waarmee een pagina kan worden opgemaakt, is het erg gemakkelijk om een nieuwe layer te ontwikkelen die deze nieuwe techniek ondersteunt.

Style

De laatste layer is Style, welke voor zichzelf spreekt. In deze layer wordt bepaald hoe de content eruit ziet. De style layer ondersteunt vele opmaak mogelijkheden, zoals tekstkleur, aangepaste lettertypes, marges, lijn afstand, tekstuitlijning en nog veel meer. Daarnaast is het mogelijk om een aangepaste styling toe te voegen als een specifiek project hier om vraagt.

MarkyMark in de toekomst

MarkyMark is een erg flexibele parser waarbij je creativiteit je enige beperking is. Voor toekomstige projecten willen we ook interactieve elementen als video’s, slideshows en tabellen ondersteunen.

Open source

Last but not least… We hebben besloten om MarkyMark een open source te maken voor iOS. Dit betekent dat je MarkyMark kan gebruiken voor je eigen projecten en zelfs kan bijdragen aan de toekomst van MarkyMark, zodat we samen de meest geavanceerde Markdown parser kunnen maken.

Je vindt MarkyMark op onze Github page.

Jim - iOS developer M2mobi

Deel dit artikel

Andere artikelen