This Alloy widget allows you to display Markdown documents in your Appcelerator Apps. I wrote it because I'm thinking of writing a mobile Markdown editor for iPad and Android tablets, and needed a proof of concept for the viewer.
Documents can be provided in one of three ways:
- Providing the actual Markdown text
- Providing the NativePath to a Markdown document in the local FileSystem
- Providing a URL to a Markdown document
This widget uses Showdown.js to render the Markdown into HTML. For styling it's using Bootstrap CSS. Only internal links are available. If your Markdown document has external links, they are disabled to prevent the user from navigating to other pages.
In your XML View
<Alloy>
<Window class="container" layout="vertical">
<Widget src="com.alcoapps.viewmarkdown" id="markdownviewer"/>
</Window>
</Alloy>
In your controller
// METHOD 1 : FROM MARKDOWN TEXT STRING
// load markdown file to view
var f = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory,'md.md');
var md = f.read().toString();
$.markdownviewer.setPageFromText(md);
// METHOD 2 : FROM FILE PATH
// load markdown file to view
var f = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory,'md.md').nativePath;
$.markdownviewer.setPageFromFilePath(f);
// METHOD 3 : FROM URL
if (Ti.Network.online){
$.markdownviewer.setPageFromURL('http://daringfireball.net/projects/markdown/syntax.text');
}else{
alert('Network is offline');
}
$.index.open();
If you wish to modify the default stylesheet, you can call the setExtraStyles method. This is useful if need to change the background or font colors to match your app's UI. You'll have to do this before you call setPagexxx.
$.markdownviewer.setExtraStyles('<style>body{background-color: #cacaca}</style>');
var f = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory,'md.md');
var md = f.read().toString();
$.markdownviewer.setPageFromText(md);
Nobody so far. Let me know if you use it!