[Assistance Request] AutoLinks and Images Not Working

[amkuchta]

Issue

First off, let me start by saying that from what I can see in the sample app, this control is amazing - literally exactly what I need.

I am having some issues with getting my markdown to render correctly - I am using databindings to display the information, so I don't know if that is the culprit or not. The markdown itself displays, and some of the extensions work (e.g. pipe tables), but not all of them. Specifically:

• AutoLinks: the text is underlined, but is not rendered as a clickable link
• Images: I am getting an error: Exception = Invalid URI: the format of the URI could not be determined. I have a feeling that this may be related to [Markdig.Wpf] Allow UriKind RelativeOrAbsolute in LinkInlineRenderer.cs #9
• Super/Sub Script: Text is rendered at normal height

For posterity, my code snippets are below:

View

The Markdown property is bound to the Contents value (typeof string) of the SelectedItem of a list in another control; Pipeline is bound to a MarkdownPipeline that is created in the ViewModel. As stated above, the Contents renders in the MarkdownViewer, just without some extensions working properly.

<wpf:MarkdownViewer 
      Markdown="{Binding ElementName=userGuidePagesListView, Path=SelectedItem.Contents}"
      Pipeline="{Binding MarkdownPipeline}" />

ViewModel

The Contents property is set by extracting the data from embedded resources files to a string

public class UserGuideViewModel : ViewModelBase
{
  public MarkdownPipeline MarkdownPipeline = new MarkdownPipelineBuilder()
      .UseAdvancedExtensions()
      .UseEmphasisExtras()
      .UseAutoLinks()
      .UseEmojiAndSmiley()
      .Build();

  private List<UserGuidePage> _userGuidePages = new List<UserGuidePage>();
  public List<UserGuidePage> UserGuidePages
  {
    get { return _userGuidePages; }
    set
    {
      if (_userGuidePages != value)
      {
        _userGuidePages = value;
        RaisePropertyChanged("UserGuidePages");
      }
    }
  }

  public UserGuideViewModel()
  { RenderUserGuidePages(); }

  private void RenderUserGuidePages()
  {
    UserGuidePages = new List<UserGuidePage>();
    string[] delimiter = new string[] { "UserGuide." };
    string[] markdownFiles = assembly.GetManifestResourceNames();
    foreach (string resource in markdownFiles)
      {
        if (resource.Contains("UserGuide") && resource.Contains(".md"))
        {
          UserGuidePage userGuidePage = new UserGuidePage();
          userGuidePage.Title = resource.Split(delimiter, StringSplitOptions.None)[1].Split('.')[0].Replace("-", " ");
          userGuidePage.Contents = GetPageContent(resource);
          UserGuidePages.Add(userGuidePage);
        }
      }
    }
  }

  private string GetPageContent(string resource)
  {
    using (Stream stream = assembly.GetManifestResourceStream(resource))
    {
      using (StreamReader streamReader = new StreamReader(stream))
      { return streamReader.ReadToEnd(); }
    }
  }

Screenshots (Annotated)

Screenshots below; I am also using the same markdown files for the Wiki on GitHub, and have included the links to those pages so that proper rendering can be viewed

Home

• Proper Markdown Rendering: https://github.com/Vulnerator/Vulnerator/wiki
  

Using the Software

• Proper Markdown Rendering: https://github.com/Vulnerator/Vulnerator/wiki/Using-the-Software
  

Change Log

• Proper Markdown Rendering: https://github.com/Vulnerator/Vulnerator/wiki/Change-Log
  

Thank you in advance for the help!

[Kryptos-FR]

Hi.

Thanks for your interests of Markdig.Wpf. Now, regarding your issues:

• Markdig.Wpf doesn't support all extensions provided by Markdig. The only one supported can be seen in MarkdownExtensions.cs
• To have the link clickable, you need to assign an action to the hyperlink. Otherwise, the page doesn't know what to do. For that purpose, you can bind a command binding to the Commands.Hyperlink command available in Commands.cs. There is an example usage in the SampleApp.
• The image URL issue seems to be related to [Markdig.Wpf] Allow UriKind RelativeOrAbsolute in LinkInlineRenderer.cs #9. I should have a look at it and fix it asap.
• Regarding sub/sup script, it is not part of common mark and is provided in Markdig by an extension. It is not supported here for the moment but a PR is welcome.

[amkuchta]

@Kryptos-FR thanks for the speedy response! Updating the Command Binding for the control did the trick, so I am happy. If I get some time, I'll look into doing a PR to assist with sup/sub. I take it your intent is to be able to support as many extensions as possible? Also, I've noticed that <h6> renders as standard text - is this by design, since it is so far down the list of headings?

[Kryptos-FR]

In the default theme, I did not define anything for h5 and h6 but they are supported. You can supply your own styling rules by overriding the related styles, for example:

<Style TargetType="{x:Type Paragraph}" x:Key="{x:Static markdig:Styles.Heading5StyleKey}">
    <Setter Property="FontSize" Value="16" />
</Style>
<Style TargetType="{x:Type Paragraph}" x:Key="{x:Static markdig:Styles.Heading6StyleKey}">
    <Setter Property="FontSize" Value="14" />
</Style>

As a general rule, I recommend to not use the default theme and provide your own. The supported styles are listed in the Styles class.

[amkuchta]

@Kryptos-FR I found all of them yesterday afternoon and ended up overriding them all (h1-h6, code blocks, etc.). This truly is an amazing control, thank you again for creating it and sharing it out with the world.

As a side thought, have you considered "partnering" with another control library to get the word out about the MarkdownViewer? I use MahApps.Metro for all of my styling, and one of the maintainers (@thoemmi) pointed me your way. If he and @punker76 agree, I think that the community at large would benefit from having your control mentioned in their readme file. On your end, it may help get some visibility, which means more contributors and a product that grows to full maturity a bit faster.

@punker76, @thoemmi, MarkdownViewer seems to be MA.M compatible - I was able to override all of the styles using MA.M keys (even going so far as to style the Checkboxes in the task list to match MA.M styles). How would you feel about providing a shoutout, similar to what you have done with LoadingIndicators.WPF and Dragablz?

[Kryptos-FR]

I'm quite busy at the moment but in two weeks I'll have more time. I'll consider your suggestion at that time.
Thanks for letting me know about those projects. I'll dig into them later.

[amkuchta]

@Kryptos-FR was the relative image location issue ever sorted out? I looked through #9, and have set my images as "Content" and "Copy Always", but they are still not rendering in-app. Thoughts?

Also, GitHub flavored markdown uses <sup> and <sub> for super and subscript, respectively. Is there a way to add that to the emphasis support for the InlineRender?

[Kryptos-FR]

@amkuchta Which version of the package are you using? The issues with images have been fixed already. For example the sample app Markdig.Wpf.SampleApp already benefits from it. Check the location where the images get copied and verify that the relative path to the executable is correct.

The support for superscript and subscript has been added thanks to a contribution by @thoemmi (see #11 ). You need to activate the corresponding extension (which is already the case by default):

new MarkdownPipelineBuilder().UseEmphasisExtras().Build();

<sup> and <sub> have nothing to do with Markdown. It is pure HTML, which is why it works in GitHub flavored markdown. The proper syntax for to use ^ and ~ instead. Pure HTML should be considered deprecated in any markdown flavor because it does not work if the document needs to be rendered to something else than HTML (which is the case here). I don't want to parse any HTML tag after Markdig library has done its job as it could get messy. Maybe it is a suggestion to do for Markdig itself. Ask @xoofx what he thinks about that.