UNPKG

@argdown/pandoc-filter

Version:

Turns Argdown code fences into svg, png, jpg, webp or web-component argument maps

christianvoigt/argdown

6 lines (5 loc) • 12.6 kB

JavaScript

exports[`Argdown Pandoc Filter 1`] = "<!DOCTYPE html>\r\n<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"\" xml:lang=\"\">\r\n<head>\r\n <meta charset=\"utf-8\" />\r\n <meta name=\"generator\" content=\"pandoc\" />\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\" />\r\n <title>example-web-component</title>\r\n <style>\r\n code{white-space: pre-wrap;}\r\n span.smallcaps{font-variant: small-caps;}\r\n span.underline{text-decoration: underline;}\r\n div.column{display: inline-block; vertical-align: top; width: 50%;}\r\n div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}\r\n ul.task-list{list-style: none;}\r\n .display.math{display: block; text-align: center; margin: 0.5rem auto;}\r\n </style>\r\n \r\n</head>\r\n<body>\r\n<h1 id=\"test\">Test</h1>\r\n<p>The map:</p>\r\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/npm/@argdown/web-components/dist/argdown-map.css\"><script src=\"https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-bundle.js\" type=\"module\"></script><script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/@argdown/web-components/dist/argdown-map.js\"></script><figure role=\"group\" class=\"argdown-figure\"><argdown-map initial-view=\"map\"><div slot=\"source\" class=\"\"><pre class=\"language-argdown\"><code class=\"language-argdown\"><span class=\"hljs-statement-title\">[s]</span>\r\n<span class=\"hljs-attack\"> -</span> <span class=\"hljs-argument-title\"><a></span></code></pre></div><div slot=\"map\">\r\n\r\n\r\n<svg width=\"204pt\" height=\"116pt\"\r\n viewBox=\"0.00 0.00 204.00 116.00\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n<g id=\"graph0\" class=\"graph\" transform=\"scale(1 1) rotate(0) translate(4 112)\">\r\n<title>Argument Map</title>\r\n\r\n<g id=\"node1\" class=\"node\">\r\n<title>n0</title>\r\n<path fill=\"white\" stroke=\"#1b9e77\" stroke-width=\"2\" d=\"M184,-108C184,-108 12,-108 12,-108 6,-108 0,-102 0,-96 0,-96 0,-84 0,-84 0,-78 6,-72 12,-72 12,-72 184,-72 184,-72 190,-72 196,-78 196,-84 196,-84 196,-96 196,-96 196,-102 190,-108 184,-108\"/>\r\n<text text-anchor=\"start\" x=\"95.5\" y=\"-88\" font-family=\"arial\" font-weight=\"bold\" font-size=\"10.00\" fill=\"#000000\">s</text>\r\n</g>\r\n\r\n<g id=\"node2\" class=\"node\">\r\n<title>n1</title>\r\n<path fill=\"#1b9e77\" stroke=\"black\" d=\"M184,-36C184,-36 12,-36 12,-36 6,-36 0,-30 0,-24 0,-24 0,-12 0,-12 0,-6 6,0 12,0 12,0 184,0 184,0 190,0 196,-6 196,-12 196,-12 196,-24 196,-24 196,-30 190,-36 184,-36\"/>\r\n<text text-anchor=\"start\" x=\"95.22\" y=\"-16\" font-family=\"arial\" font-weight=\"bold\" font-size=\"10.00\" fill=\"#000000\">a</text>\r\n</g>\r\n\r\n<g id=\"edge1\" class=\"edge\">\r\n<title>n1->n0</title>\r\n<path fill=\"none\" stroke=\"#ff0000\" d=\"M98,-36.3C98,-44.02 98,-53.29 98,-61.89\"/>\r\n<polygon fill=\"#ff0000\" stroke=\"#ff0000\" points=\"94.5,-61.9 98,-71.9 101.5,-61.9 94.5,-61.9\"/>\r\n</g>\r\n</g>\r\n</svg>\r\n</div></argdown-map></figure>\r\n<p>And the source:</p>\r\n<figure role=\"group\" class=\"argdown-figure\"><argdown-map initial-view=\"source\"><div slot=\"source\" class=\"\"><pre class=\"language-argdown\"><code class=\"language-argdown\"><span class=\"hljs-statement-title\">[s]</span>\r\n<span class=\"hljs-attack\"> -</span> <span class=\"hljs-argument-title\"><a></span></code></pre></div><div slot=\"map\">\r\n\r\n\r\n<svg width=\"204pt\" height=\"116pt\"\r\n viewBox=\"0.00 0.00 204.00 116.00\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n<g id=\"graph0\" class=\"graph\" transform=\"scale(1 1) rotate(0) translate(4 112)\">\r\n<title>Argument Map</title>\r\n\r\n<g id=\"node1\" class=\"node\">\r\n<title>n0</title>\r\n<path fill=\"white\" stroke=\"#1b9e77\" stroke-width=\"2\" d=\"M184,-108C184,-108 12,-108 12,-108 6,-108 0,-102 0,-96 0,-96 0,-84 0,-84 0,-78 6,-72 12,-72 12,-72 184,-72 184,-72 190,-72 196,-78 196,-84 196,-84 196,-96 196,-96 196,-102 190,-108 184,-108\"/>\r\n<text text-anchor=\"start\" x=\"95.5\" y=\"-88\" font-family=\"arial\" font-weight=\"bold\" font-size=\"10.00\" fill=\"#000000\">s</text>\r\n</g>\r\n\r\n<g id=\"node2\" class=\"node\">\r\n<title>n1</title>\r\n<path fill=\"#1b9e77\" stroke=\"black\" d=\"M184,-36C184,-36 12,-36 12,-36 6,-36 0,-30 0,-24 0,-24 0,-12 0,-12 0,-6 6,0 12,0 12,0 184,0 184,0 190,0 196,-6 196,-12 196,-12 196,-24 196,-24 196,-30 190,-36 184,-36\"/>\r\n<text text-anchor=\"start\" x=\"95.22\" y=\"-16\" font-family=\"arial\" font-weight=\"bold\" font-size=\"10.00\" fill=\"#000000\">a</text>\r\n</g>\r\n\r\n<g id=\"edge1\" class=\"edge\">\r\n<title>n1->n0</title>\r\n<path fill=\"none\" stroke=\"#ff0000\" d=\"M98,-36.3C98,-44.02 98,-53.29 98,-61.89\"/>\r\n<polygon fill=\"#ff0000\" stroke=\"#ff0000\" points=\"94.5,-61.9 98,-71.9 101.5,-61.9 94.5,-61.9\"/>\r\n</g>\r\n</g>\r\n</svg>\r\n</div></argdown-map></figure>\r\n<div>\r\n<span>Some really boring html</span>\r\n</div>\r\n</body>\r\n</html>\r\n"; exports[`Argdown Pandoc Filter 2`] = "<!DOCTYPE html>\r\n<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"\" xml:lang=\"\">\r\n<head>\r\n <meta charset=\"utf-8\" />\r\n <meta name=\"generator\" content=\"pandoc\" />\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\" />\r\n <title>example-inline-jpg</title>\r\n <style>\r\n code{white-space: pre-wrap;}\r\n span.smallcaps{font-variant: small-caps;}\r\n span.underline{text-decoration: underline;}\r\n div.column{display: inline-block; vertical-align: top; width: 50%;}\r\n div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}\r\n ul.task-list{list-style: none;}\r\n .display.math{display: block; text-align: center; margin: 0.5rem auto;}\r\n </style>\r\n \r\n</head>\r\n<body>\r\n<h1 id=\"test\">Test</h1>\r\n<p>The map:</p>\r\n<figure>\r\n<img src=\"data:image/svg+xml;base64,CjwhLS0gR2VuZXJhdGVkIGJ5IGdyYXBodml6IHZlcnNpb24gMi40Ny4wICgyMDIxMDMxNi4wMDA0KQogLS0+CjwhLS0gVGl0bGU6IEFyZ3VtZW50IE1hcCBQYWdlczogMSAtLT4KPHN2ZyB3aWR0aD0iMjA0cHQiIGhlaWdodD0iMTE2cHQiCiB2aWV3Qm94PSIwLjAwIDAuMDAgMjA0LjAwIDExNi4wMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CjxnIGlkPSJncmFwaDAiIGNsYXNzPSJncmFwaCIgdHJhbnNmb3JtPSJzY2FsZSgxIDEpIHJvdGF0ZSgwKSB0cmFuc2xhdGUoNCAxMTIpIj4KPHRpdGxlPkFyZ3VtZW50IE1hcDwvdGl0bGU+CjwhLS0gbjAgLS0+CjxnIGlkPSJub2RlMSIgY2xhc3M9Im5vZGUiPgo8dGl0bGU+bjA8L3RpdGxlPgo8cGF0aCBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSIjMWI5ZTc3IiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0xODQsLTEwOEMxODQsLTEwOCAxMiwtMTA4IDEyLC0xMDggNiwtMTA4IDAsLTEwMiAwLC05NiAwLC05NiAwLC04NCAwLC04NCAwLC03OCA2LC03MiAxMiwtNzIgMTIsLTcyIDE4NCwtNzIgMTg0LC03MiAxOTAsLTcyIDE5NiwtNzggMTk2LC04NCAxOTYsLTg0IDE5NiwtOTYgMTk2LC05NiAxOTYsLTEwMiAxOTAsLTEwOCAxODQsLTEwOCIvPgo8dGV4dCB0ZXh0LWFuY2hvcj0ic3RhcnQiIHg9Ijk1LjUiIHk9Ii04OCIgZm9udC1mYW1pbHk9ImFyaWFsIiBmb250LXdlaWdodD0iYm9sZCIgZm9udC1zaXplPSIxMC4wMCIgZmlsbD0iIzAwMDAwMCI+czwvdGV4dD4KPC9nPgo8IS0tIG4xIC0tPgo8ZyBpZD0ibm9kZTIiIGNsYXNzPSJub2RlIj4KPHRpdGxlPm4xPC90aXRsZT4KPHBhdGggZmlsbD0iIzFiOWU3NyIgc3Ryb2tlPSJibGFjayIgZD0iTTE4NCwtMzZDMTg0LC0zNiAxMiwtMzYgMTIsLTM2IDYsLTM2IDAsLTMwIDAsLTI0IDAsLTI0IDAsLTEyIDAsLTEyIDAsLTYgNiwwIDEyLDAgMTIsMCAxODQsMCAxODQsMCAxOTAsMCAxOTYsLTYgMTk2LC0xMiAxOTYsLTEyIDE5NiwtMjQgMTk2LC0yNCAxOTYsLTMwIDE5MCwtMzYgMTg0LC0zNiIvPgo8dGV4dCB0ZXh0LWFuY2hvcj0ic3RhcnQiIHg9Ijk1LjIyIiB5PSItMTYiIGZvbnQtZmFtaWx5PSJhcmlhbCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZvbnQtc2l6ZT0iMTAuMDAiIGZpbGw9IiMwMDAwMDAiPmE8L3RleHQ+CjwvZz4KPCEtLSBuMSYjNDU7Jmd0O24wIC0tPgo8ZyBpZD0iZWRnZTEiIGNsYXNzPSJlZGdlIj4KPHRpdGxlPm4xJiM0NTsmZ3Q7bjA8L3RpdGxlPgo8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNmZjAwMDAiIGQ9Ik05OCwtMzYuM0M5OCwtNDQuMDIgOTgsLTUzLjI5IDk4LC02MS44OSIvPgo8cG9seWdvbiBmaWxsPSIjZmYwMDAwIiBzdHJva2U9IiNmZjAwMDAiIHBvaW50cz0iOTQuNSwtNjEuOSA5OCwtNzEuOSAxMDEuNSwtNjEuOSA5NC41LC02MS45Ii8+CjwvZz4KPC9nPgo8L3N2Zz4K\" alt=\"\" /><figcaption aria-hidden=\"true\"></figcaption>\r\n</figure>\r\n<div>\r\n<span>Some really boring html</span>\r\n</div>\r\n</body>\r\n</html>\r\n"; exports[`Argdown Pandoc Filter 3`] = "<!DOCTYPE html>\r\n<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"\" xml:lang=\"\">\r\n<head>\r\n <meta charset=\"utf-8\" />\r\n <meta name=\"generator\" content=\"pandoc\" />\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\" />\r\n <title>example-file-jpg</title>\r\n <style>\r\n code{white-space: pre-wrap;}\r\n span.smallcaps{font-variant: small-caps;}\r\n span.underline{text-decoration: underline;}\r\n div.column{display: inline-block; vertical-align: top; width: 50%;}\r\n div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}\r\n ul.task-list{list-style: none;}\r\n .display.math{display: block; text-align: center; margin: 0.5rem auto;}\r\n </style>\r\n \r\n</head>\r\n<body>\r\n<h1 id=\"test\">Test</h1>\r\n<p>The map:</p>\r\n<figure>\r\n<img src=\"C:\\Users\\1pxso\\workspace\\argdown\\packages\\argdown-pandoc-filter\\test\\images\\map-1.jpg\" alt=\"\" /><figcaption aria-hidden=\"true\"></figcaption>\r\n</figure>\r\n<div>\r\n<span>Some really boring html</span>\r\n</div>\r\n</body>\r\n</html>\r\n"; exports[`Argdown Pandoc Filter 4`] = "<!DOCTYPE html>\r\n<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"\" xml:lang=\"\">\r\n<head>\r\n <meta charset=\"utf-8\" />\r\n <meta name=\"generator\" content=\"pandoc\" />\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\" />\r\n <title>example-file-png</title>\r\n <style>\r\n code{white-space: pre-wrap;}\r\n span.smallcaps{font-variant: small-caps;}\r\n span.underline{text-decoration: underline;}\r\n div.column{display: inline-block; vertical-align: top; width: 50%;}\r\n div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}\r\n ul.task-list{list-style: none;}\r\n .display.math{display: block; text-align: center; margin: 0.5rem auto;}\r\n </style>\r\n \r\n</head>\r\n<body>\r\n<h1 id=\"test\">Test</h1>\r\n<p>The map:</p>\r\n<figure>\r\n<img src=\"C:\\Users\\1pxso\\workspace\\argdown\\packages\\argdown-pandoc-filter\\test\\images\\map-1.png\" alt=\"\" /><figcaption aria-hidden=\"true\"></figcaption>\r\n</figure>\r\n<div>\r\n<span>Some really boring html</span>\r\n</div>\r\n</body>\r\n</html>\r\n"; exports[`Argdown Pandoc Filter 5`] = "<!DOCTYPE html>\r\n<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"\" xml:lang=\"\">\r\n<head>\r\n <meta charset=\"utf-8\" />\r\n <meta name=\"generator\" content=\"pandoc\" />\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\" />\r\n <title>example-file-webp</title>\r\n <style>\r\n code{white-space: pre-wrap;}\r\n span.smallcaps{font-variant: small-caps;}\r\n span.underline{text-decoration: underline;}\r\n div.column{display: inline-block; vertical-align: top; width: 50%;}\r\n div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}\r\n ul.task-list{list-style: none;}\r\n .display.math{display: block; text-align: center; margin: 0.5rem auto;}\r\n </style>\r\n \r\n</head>\r\n<body>\r\n<h1 id=\"test\">Test</h1>\r\n<p>The map:</p>\r\n<figure>\r\n<img src=\"C:\\Users\\1pxso\\workspace\\argdown\\packages\\argdown-pandoc-filter\\test\\images\\map-1.webp\" alt=\"\" /><figcaption aria-hidden=\"true\"></figcaption>\r\n</figure>\r\n<div>\r\n<span>Some really boring html</span>\r\n</div>\r\n</body>\r\n</html>\r\n";