Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I make markdown.js display a markdown document as HTML in a TWebBrowser in Delphi?

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:

enter image description here

like image 241
Nick Hodges Avatar asked Nov 09 '12 04:11

Nick Hodges


1 Answers

OK, this works:

Screenshot

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

like image 172
Wouter van Nifterick Avatar answered Nov 08 '22 17:11

Wouter van Nifterick