Is there a way to tell Markdig where to look for files relative to the root directory?

I am reading a README.md file from my project's root directory, defined by a hard coded path in C#. This is then converted from Markdown to a FlowDocument via Markdig and displayed as a WPF page. All this works, except the image links in the README.md file do NOT get rendered. I am assuming this is because the the renderer in Markdig can't find them, not knowing to look in relation to the project's root directory. Here is the code:

    public partial class ReadmeWindow : Window
    {
        public ReadmeWindow()
        {
            InitializeComponent();
            Loaded += OnReadmeLoaded;
        }

        private static Markdig.MarkdownPipeline BuildPipeline()
        {
            return new Markdig.MarkdownPipelineBuilder()
                .UseSupportedExtensions()
                .Build();
        }

        private void OnReadmeLoaded(object sender, RoutedEventArgs e)
        {
            var projectDirectory = Path.GetFullPath(Path.Combine(AppContext.BaseDirectory, "..\\..\\..\\"));
            var readmePath = Path.Combine(projectDirectory, "README.md");

            if (File.Exists(readmePath))
            {
                var markdown = File.ReadAllText(readmePath);
                Markdown.ToXaml(markdown);
                var xaml = Markdig.Wpf.Markdown.ToXaml(markdown, BuildPipeline());
                using (var stream = new MemoryStream(Encoding.UTF8.GetBytes(xaml)))
                {
                    using (var reader = new XamlXmlReader(stream, new MyXamlSchemaContext()))
                    {
                        if (XamlReader.Load(reader) is FlowDocument document)
                        {
                            Viewer.Document = document;
                        }
                    }
                }
            }
            else
            {
                MessageBox.Show("Markdown file not found: " + readmePath);
            }
        }

You can see in the OnReadmeLoaded() above method where I read the file from the project's root directory.

Is there a way to tell Markdig where to look for files relative to the root directory? For example, with images in project root/Docs:

![key details](Docs/key-details.PNG)

Is there a way to tell Markdig where to look for files relative to the root directory?

I am reading a README.md file from my project's root directory, defined by a hard coded path in C#. This is then converted from Markdown to a FlowDocument via Markdig and displayed as a WPF page. All this works, except the image links in the README.md file do NOT get rendered. I am assuming this is because the the renderer in Markdig can't find them, not knowing to look in relation to the project's root directory. Here is the code:

    public partial class ReadmeWindow : Window
    {
        public ReadmeWindow()
        {
            InitializeComponent();
            Loaded += OnReadmeLoaded;
        }

        private static Markdig.MarkdownPipeline BuildPipeline()
        {
            return new Markdig.MarkdownPipelineBuilder()
                .UseSupportedExtensions()
                .Build();
        }

        private void OnReadmeLoaded(object sender, RoutedEventArgs e)
        {
            var projectDirectory = Path.GetFullPath(Path.Combine(AppContext.BaseDirectory, "..\\..\\..\\"));
            var readmePath = Path.Combine(projectDirectory, "README.md");

            if (File.Exists(readmePath))
            {
                var markdown = File.ReadAllText(readmePath);
                Markdown.ToXaml(markdown);
                var xaml = Markdig.Wpf.Markdown.ToXaml(markdown, BuildPipeline());
                using (var stream = new MemoryStream(Encoding.UTF8.GetBytes(xaml)))
                {
                    using (var reader = new XamlXmlReader(stream, new MyXamlSchemaContext()))
                    {
                        if (XamlReader.Load(reader) is FlowDocument document)
                        {
                            Viewer.Document = document;
                        }
                    }
                }
            }
            else
            {
                MessageBox.Show("Markdown file not found: " + readmePath);
            }
        }

You can see in the OnReadmeLoaded() above method where I read the file from the project's root directory.

Is there a way to tell Markdig where to look for files relative to the root directory? For example, with images in project root/Docs:

![key details](Docs/key-details.PNG)

• c#
• wpf
• markdown
• markdig

1 Answer 1

Well, I don't know if Markdig has a setting for the "root" directory, I couldn't find one. But, I found a way to make it work.

Given that you have two PNG files in the root/Docs directory you want to access you can set them as Included content in an ItemGroup at compile by adding them to your csproj file. The csproj file would look like this:

<Project Sdk="Microsoft.NET.Sdk">
.
.
.
  <ItemGroup>
    <Content Include="Docs\keystore.PNG" Link="Docs\keystore.PNG">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </Content>
    <Content Include="Docs\key-details.PNG" Link="Docs\key-details.PNG">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </Content>
  </ItemGroup>
</Project>

These Included files will be found by the Markdig parser when written in your Markdown file like this:

![keystore](Docs/keystore.PNG)
![key details](Docs/key-details.PNG)

Voila!