[Gambas-user] Markdown and CSS

Sat Jan 19 22:18:24 CET 2019

On Thu, 17 Jan 2019, Hans Lehmann wrote:
> Hello,
> 
> how do I include the CSS file `md_style.css` into a markdown document, which
> is located in a folder `css`? The CSS folder is in the same directory as the
> Markdown document and the resulting HTML document.
> 

This is not possible directly in (standard -- whatever that means) Markdown.
Markdown is a simple markup language and documents written in it can be
converted to HTML but also to other output formats which do not support
inclusion of CSS. You would need an HTML extension to the Markdown syntax
to specify headers/CSS/Javascript directly in the document. (Some processors
such as pandoc allow for this.)

The Markdown class in gb.markdown has a ToHTML method which converts
a Markdown snippet into an equivalent HTML snippet:

  Const MARKDOWN As String = ""
  "Hallo,\n"
  "\n"
  "das ist aber ein *schöner* Text!"

  Public Sub Main()
    Print Markdown.ToHTML(MARKDOWN)
  End

  > <p>Hallo,</p>
  > <p>das ist aber ein <em>schöner</em> Text!</p>

So the output of the ToHTML method is not a valid HTML document. What seems
like a problem initially comes in handy in your case. When you rewrite Markdown
as HTML, what you should do is provide a template HTML file into which you
insert the ToHTML'd Markdown document. This template is where you can include
a CSS file:

  Const TEMPLATE As String = ""
  "<!DOCTYPE html>\n"
  "<html>"
  "<head>\n"
  "<link rel=\"stylesheet\" type=\"text/css\" href=\"md_style.css\" />\n"
  "</head>\n"
  "<body>\n"
  "</body>\n"
  "</html>"

  Const MARKDOWN As String = ""
  "Hallo,\n"
  "\n"
  "das ist aber ein *schöner* Text!"

  Public Sub Main()
    Dim xTemplate As New HtmlDocument
    xTemplate.FromString(TEMPLATE)
    xTemplate.GetElementsByTagName("body").First.AppendFromText(Markdown.ToHTML(MARKDOWN))
    Print xTemplate.ToString()
  End

  > <!DOCTYPE html>
  > <html><head>
  > <link rel="stylesheet" type="text/css" href="md_style.css" />
  > </head>
  > <body>
  > <p>Hallo,</p>
  > <p>das ist aber ein <em>schöner</em> Text!</p></body>
  > </html>

If you're asking this in the context of in-source documentation for a
Gambas library: I'm not aware of the IDE supporting a custom template
or otherwise inclusion of your own CSS file.

Regards,
Tobias

-- 
"There's an old saying: Don't change anything... ever!" -- Mr. Monk