Images in HTML

[joust]

Support for images would make some arguments more visually accessible. Possible syntax like in markdown.

[christianvoigt]

I see two different use cases for images:

• using icons in the argument/statement nodes in the exported map
• using other kinds of illustrations in "normal" text in html/pdf like in Markdown

Your proposal sounds like the second case, right?

Both would be useful, but the second use case could also be accommodated by using Markdown with embedded Argdown code snippets (which could then be exported as argument maps). This is something I want to work on in the future anyway.

For the first use case a different kind of syntax would be needed, as the icons should not be inserted into the statement text. A good solution would be to write a plugin for node icons that looks in the argument/statement meta data for an "icon" property and inserts it into the generated map views. The advantage is that we do not have to expand the syntax for that:

[My statement]: Some text {icon: "path/to/icon.svg"}

<My argument>: Some text {icon: "path/to/different/icon.svg"}

Maybe it would be even better to write a plugin that assigns icons to tags as this would not clutter the source code with meta data. The Argdown would then look like this:

===
icons: {tag1: "path/to/icon.svg", tag2: "path/to/another/icon.svg"}
===

[My statement]: Some text #tag1

<My argument>: some text #tag2

It is easy to get the data from the Argdown parser. What would take time is to extend the map views (and maybe also the html/pdf export). For the next versions I will focus on other features, so help with this would be welcome.

[sbrugman]

Is there a workaround for the second use case, for example rendering HTML (i.e. not stripping HTML images)?

Currently, I use argdown to communicate technical argumentation, where figures are essential to clearly communicate these concepts.

[christianvoigt]

It depends on what you want to achieve. If you want to have images in the HTML preview in the VSCode extension, there currently is no workaround. The same is true for the HTML export.

If you would like to create a text with images and Argdown code snippets, you can use Markdown with Argdown code fences and insert your illustrations in Markdown. You can then use Pandoc together with argdown-pandoc-highlighting to add syntax highlighting to the Argdown snippets. If you would like to insert argument maps, you would have to first export them with the Argdown tools to svg or as an image and then insert them into your Markdown document. We have used this successfully for learning materials, but it is probably not exactly what you had in mind.

Secondly, if you have time and know some Javascript, you could take a look at how the Argdown documentation is generated. It is written in Markdown with Argdown code fences that are automatically transformed into svg argument maps. It uses a static site generator (VuePress) that uses markdown-it to parse the Markdown code. I have written a plugin for markdown-it that transforms the Argdown snippets into a Vue widget and generates the svg argument maps to be displayed within these widgets. You could use similar code to generate pure html without any dependence on Vue.Js.

My aim for the next Argdown release is to make this kind of workflow available for everyone, so that it is easy to embed Argdown maps into html pages and to write Markdown documents with Argdown code fences. While I would really like to implement that as soon as possible, in the next months I will probably not find the time to do so.

[christianvoigt]

As there is now a separate issue for "icons in nodes" (#129), I will use this issue to keep track of the second use case ("images in html").

[christianvoigt]

With the new Argdown in Markdown workflow in in v1.4.x, it is now possible to combine Markdown images with Argdown code blocks.

@sbrugman, @joust: Is this feature useful for your use cases? Feedback would be welcome.

I will leave this issue open for a while so you can simply use it for that purpose if you want.