How do I make markdown.js display a markdown document as HTML in a TWebBrowser in Delphi?
Given the contents of a string containing Markdown, how do I get markdown.js to convert that markdown into HTML, and display that HTML in a TWebBrowser component, all inside my Delphi desktop application?
UPDATE:
Following Wouter's example (thank you, Wouter!), if I simply do this:
procedure TForm2.Button1Click(Sender: TObject);
begin
WebBrowser1.Navigate('file://C:/junk/markdown/lib/markdown.js');
end;
Then I get a series of warnings. First, from Windows "protecting" me from the javascript. I approve and run everything, but finally I get:
OK, this works:
HTML:
<!DOCTYPE html>
<html>
<head><style>body{font-family:Arial;font-size:small}</style></head>
<body>
<div id="markdown"></div>
<input type="hidden" id="hidden" />
<script type="text/javascript">
hiddenEl=document.getElementById('hidden');
markdownEl=document.getElementById('markdown');
</script>
<script src="lib/markdown.js"></script>
</body>
</html>
Delphi code:
procedure TForm38.Memo1Change(Sender: TObject);
begin
WebBrowser1.OleObject.Document.GetElementByID('hidden').setAttribute('value', Memo1.Text);
WebBrowser1.OleObject.Document.ParentWindow.execScript('markdownEl.innerHTML = markdown.toHTML(hiddenEl.value)');
end;
procedure TForm38.FormCreate(Sender: TObject);
begin
WebBrowser1.Navigate('file://c:/!/markdown.html');
end;
Of course this is just a proof of concept.
Especially the Delphi code should check if the document was loaded, but that type of code would only be distracting for this example.
Maybe you're wondering why I first write the contents of the TMemo to a hidden element?
That's because it's complicated to pass a text with linebreaks to a JavaScript function when you build the JavaScript as a string. You would get something like this:
window.alert("Hello
World");
update
In my example, I have markdown.js in a subfolder lib
of the html file.
Make sure that <script src="lib/markdown.js"></script>
really points to the location of Markdown.js