Welcome to md2html.com

Temporal Pages

 

MD to HTML is a tool for configurable conversions of your documents. 

We can help you to create perfect looking html pages converted from markdown (.md) documents, which are more human readable and easily editable. You will appreciate it especially when it comes to highlighting all the syntax and data types in your software documentation as it would be displayed in a professional IDE. 

Main Features

  • Fully configurable and customizable templates
  • Bootstrap 5 compatibility in the default configuration. 
  • Customizable syntax and data types highlighting of code-block like in professional IDE for: 
    • CSharp, Java, JavaScript, JSON, CSS, HTML, XML, SQL
    • ...and any other language you can easily configure... 
  • We can check if you follow the right MD conventions and give you a preview how it would look like. 
  • See also: http://d3orm.com

Running the Export

Customizable Configuration


{
    ... 
    {
      "ElementType": "CodeBlock", 
      "Target": {
        "ClassName": "col-12 code-block row", 
        "ValueFormat": "<div {id} data-codetype=\"{2}\" style=\"font-family: consolas\" class=\"{1}\">{0}</div>"
      }
    }
    ... 
}

We run the conversion with your configuration. 


IoCContainer.AddScoped<IParser,MDHtmlParser>(); 
... 
customizedConfigPath = "some/path"; 
customizedConfig = JsonConvert.Deserialize<Md2HtmlConfig>(File.ReadAllText(customizedConfigPath)); 
... 
using (var scope = IoCContainer.CreateScope())
{
     var parser = scope.GetService<IParser>(); 
     foreach (var mdFile in files)
     {
         var rootDiv = parser.Convert(mdFile, customizedConfigPath); 
         var outFilePath = $"C:/path/{Path.GetFileNaneWithoutExtension(mdFile)}{customizedConfig.Extension}"; 
         using (var outFS = new FileStream(outFilePath, FileMode.OpenOrCreate())
         {
             outFS.SetLength(0); 
             var bytes = Encoding.UTF8.GetBytes(rootDiv); 
             outFS.Write(bytes, 0, bytes.Length); 
         }
     }
}

Front-end on Your Side

  • Base CSS


      ... 
      .highlight {
          background-color: burlywood; 
      }
      ... 

  • Html


      <link style="css" src="Styles/md2html.css" />
      <script type="text/javascript" src="Scripts/md2html.js">
      <script type="text/javascript">codeblock_highlight();</script>