Markdown/AsciiDoc --> PDF tool #39
Comments
|
Alternate to using PhantomJS is - https://github.com/dompdf/dompdf - this is the PHP implementation of PDF rendering. |
|
Discussion: https://superuser.com/questions/689056/how-can-i-convert-github-flavored-markdown-to-a-pdf Listing of several tools: https://gist.github.com/justincbagley/ec0a6334cc86e854715e459349ab1446 Here's two resources for tool recommendations. One thing I gathered is Pandoc relies on LaTeX under the hood - I know about LaTeX from having used it in college many years ago - but it is a rather large and heavy-weight thing. https://superuser.com/questions/689056/how-can-i-convert-github-flavored-markdown-to-a-pdf https://github.com/alanshaw/markdown-pdf - This tool converts Markdown to HTML, then uses PhantomJS to print that to PDF. PhantomJS is a wrapper around the Chrome engine that is most often used for automated UI testing. It means it is a "Browser" that you can drive from software, and therefore use it to generate PDF. https://github.com/dompdf/dompdf - is an implementation of high quality PDF rendering in PHP. https://gist.github.com/justincbagley/ec0a6334cc86e854715e459349ab1446?permalink_comment_id=5281580#gistcomment-5281580 -- Is an interesting comment in the Gist above. It relies on a Visual Studio Code extension for printing PDF from Markdown. |
|
Trying to use Paged.js -- https://pagedjs.org/ The getting started page has instructions for Node.js usage at - https://pagedjs.org/documentation/2-getting-started-with-paged.js/#starting-paged.js Commands: npm install -g pagedjs-cli pagedjs
pagedjs-cli index.html -o result.pdfThe resulting installation: $ npm ls pagedjs-cli pagedjs
[email protected] /home/david/Projects/openadr/docx2pdf
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]The primary tool is: https://www.npmjs.com/package/pagedjs-cli I have constructed an AkashaCMS website project with a single Markdown file. This file is generated using Pandoc from a DOCX file created with Word by a standards agency. The DOCX file is in good shape. The Markdown file was not very good, but usable and could be cleaned up. Output: $ npx pagedjs-cli -i out/Definition.html -o def-paged.pdf
◷ Loading: out/Definition.htmlError: Failed to launch the browser process!
[1251282:1251282:1209/225626.894306:FATAL:zygote_host_impl_linux.cc(127)] No usable sandbox! Update your kernel or see https://chromium.googlesource.com/chromium/src/+/main/docs/linux/suid_sandbox_development.md for more information on developing with the SUID sandbox. If you want to live dangerously and need an immediate workaround, you can try using --no-sandbox.
TROUBLESHOOTING: https://pptr.dev/troubleshooting
at ChildProcess.onClose (file:///home/david/Projects/openadr/docx2pdf/node_modules/@puppeteer/browsers/lib/esm/launch.js:268:24)
at ChildProcess.emit (node:events:530:35)
at ChildProcess._handle.onexit (node:internal/child_process:293:12)The web page referenced in the error discusses installing chrome-devel-sandbox but that doesn't seem to exist in the Ubuntu package system. |
|
For the testing so far - I had a DOCX file which was created in MS Word by a standards organization. The plan is to
The first stab at the first step - DOCX->Markdown - I tried two programs.
Pandoc Markdown-HTML conversion: pandoc test1.md -f markdown -t html -s -o test1.htmlPandoc DOCX to Markdown conversion pandoc 3.1.0/Definition.docx -t markdown -o def.mdReplace This meant two tools for DOCX-Markdown conversion. Neither did a terribly good job. The least bad result was with Pandoc. |
|
Markdown-pdf is a Node.js tool that can convert directly from Markdown to PDF. In theory this is less desirable since there are fewer opportunities to customize the output with good font and color choices or other fancy formatting. But, it is worth exploring. Browsing the source code it does a Markdown-HTML conversion, then loads the HTML into a headless Chrome (web browser) instance, and tells that instance to Print to PDF. https://www.npmjs.com/package/markdown-pdf The command is: $ npx markdown-pdf -o def-md-pdf.pdf documents/Definition.html.md But, this fails with the following errors: A4 portrait 2cm 0 10000
Auto configuration failed
131987413665600:error:25066067:DSO support routines:DLFCN_LOAD:could not load the shared library:dso_dlfcn.c:185:filename(libproviders.so): libproviders.so: cannot open shared object file: No such file or directory
131987413665600:error:25070067:DSO support routines:DSO_load:could not load the shared library:dso_lib.c:244:
131987413665600:error:0E07506E:configuration file routines:MODULE_LOAD_DSO:error loading dso:conf_mod.c:285:module=providers, path=providers
131987413665600:error:0E076071:configuration file routines:MODULE_RUN:unknown module name:conf_mod.c:222:module=providersAfter some head scratching and searching this is found: https://forums.gentoo.org/viewtopic-p-8793806.html?sid=a7a4227e46aa82bb934fc71187a89cb9 After a lot of discussion those Gentoo guys came up with this solution: export OPENSSL_CONF=/etc/sslThat seemingly random suggestion actually works great. It produces a PDF that - considering the state of the Markdown file - is not bad. The USAGE information hints at some interesting options for customizing the output using CSS Usage: markdown-pdf [options] <markdown-file-path>
Options:
-V, --version output the version number
<markdown-file-path> Path of the markdown file to convert
-c, --cwd [path] Current working directory
-p, --phantom-path [path] Path to phantom binary
-h, --runnings-path [path] Path to runnings (header, footer)
-s, --css-path [path] Path to custom CSS file
-z, --highlight-css-path [path] Path to custom highlight-CSS file
-m, --remarkable-options [json-options] Options to pass to remarkable
-f, --paper-format [format] "A3", "A4", "A5", "Legal", "Letter" or "Tabloid"
-r, --paper-orientation [orientation] "portrait" or "landscape"
-b, --paper-border [measurement] Supported dimension units are: "mm", "cm", "in", "px"
-d, --render-delay [millis] Delay before rendering the PDF
-t, --load-timeout [millis] Timeout before the page is rendered in case `page.onLoadFinished` isn't fired
-o, --out [path] Path of where to save the PDF
-h, --help output usage information |
|
DOMPDF is a PHP toolset for PDF generation - https://github.com/dompdf/dompdf Tutorial: https://www.codexworld.com/convert-html-to-pdf-php-dompdf/ Tutorial: https://www.allphptricks.com/convert-html-to-pdf-using-php-dompdf-library/ Tutorial: https://medium.com/@yourblogcoach1/convert-html-to-pdf-using-dompdf-7fb21d5ce5e |
|
Using DOMPDF. I first tried using Composer to set up DOMPDF as per some of the tutorials. But this gave an error that is unclear how to resolve: PHP Warning: The use statement with non-compound name 'Dompdf' has no effect in /home/david/Projects/openadr/docx2pdf/t/cvt.php on line 7
PHP Fatal error: Uncaught Error: Class "Dompdf" not found in /home/david/Projects/openadr/docx2pdf/t/cvt.php:10
Stack trace:
#0 {main}
thrown in /home/david/Projects/openadr/docx2pdf/t/cvt.php on line 10The script source is: <?php
// The Composer autoloader
require_once 'vendor/autoload.php';
// Reference the Dompdf namespace
use Dompdf\Dompdf as Dompdf;
// Instantiate and use the dompdf class
$dompdf = new Dompdf();
// Load HTML content to generate a PDF
// $dompdf->loadHtml('<h1 style="color:blue;">AllPHPTricks.com</h1>');
// Load PDF content from an HTML file
$html_file = file_get_contents("../../out/Definition.html");
$dompdf->loadHtml($html_file);
// (Optional) Setup the paper size and orientation
$dompdf->setPaper('A4', 'landscape');
// Render the HTML as PDF
$dompdf->render();
// Returns the PDF file as a string.
$pdf_string = $dompdf->output();
// PDF file name and location to store file
$pdf_file_loc = 'Definition.pdf';
// Save generated PDF to the desired location with custom name
file_put_contents($pdf_file_loc, $pdf_string);
?>This is from one of the tutorials, modified lightly to directly load HTML from a local file. But - instead going to the DOMPDF GitHub repository (https://github.com/dompdf/dompdf) there is a Releases section. I downloaded the most recent release, Notice that the script loads Notice that installing Composer as a native thing on my laptop resulted in installation of a zillion PHP things. $ php cvt.php
PHP Fatal error: Uncaught Error: Class "DOMImplementation" not found in /home/david/Projects/openadr/docx2pdf/tt/dompdf/vendor/masterminds/html5/src/HTML5/Parser/DOMTreeBuilder.php:172
Stack trace:
#0 /home/david/Projects/openadr/docx2pdf/tt/dompdf/vendor/masterminds/html5/src/HTML5.php(157): Masterminds\HTML5\Parser\DOMTreeBuilder->__construct()
#1 /home/david/Projects/openadr/docx2pdf/tt/dompdf/vendor/masterminds/html5/src/HTML5.php(89): Masterminds\HTML5->parse()
#2 /home/david/Projects/openadr/docx2pdf/tt/dompdf/vendor/dompdf/dompdf/src/Dompdf.php(514): Masterminds\HTML5->loadHTML()
#3 /home/david/Projects/openadr/docx2pdf/tt/dompdf/cvt.php(18): Dompdf\Dompdf->loadHtml()
#4 {main}
thrown in /home/david/Projects/openadr/docx2pdf/tt/dompdf/vendor/masterminds/html5/src/HTML5/Parser/DOMTreeBuilder.php on line 172Fixing that required the following: $ sudo apt-cache search php-dom
[sudo] password for david:
php8.3-xml - DOM, SimpleXML, XML, and XSL module for PHP
$ sudo apt-get install php8.3-xmlAfter which: $ php cvt.php No output means success. Indeed, |
|
Using Puppeteer, developed the following script that both handles rendering Markdown to HTML and then using Puppeteer to render HTML to PDF import { default as config } from './config.mjs';
import puppeteer from 'puppeteer';
const akasha = config.akasha;
await akasha.setup(config);
// await data.removeAll();
await config.copyAssets();
let results = await akasha.render(config);
// Initialization comes from
// https://apitemplate.io/blog/tips-for-generating-pdfs-with-puppeteer/
const browser = await puppeteer.launch({
headless: true,
userDataDir: './tmp',
args: [ '--disable-features=IsolateOrigins',
'--disable-site-isolation-trials',
'--autoplay-policy=user-gesture-required',
'--disable-background-networking',
'--disable-background-timer-throttling',
'--disable-backgrounding-occluded-windows',
'--disable-breakpad',
'--disable-client-side-phishing-detection',
'--disable-component-update',
'--disable-default-apps',
'--disable-dev-shm-usage',
'--disable-domain-reliability',
'--disable-extensions',
'--disable-features=AudioServiceOutOfProcess',
'--disable-hang-monitor',
'--disable-ipc-flooding-protection',
'--disable-notifications',
'--disable-offer-store-unmasked-wallet-cards',
'--disable-popup-blocking',
'--disable-print-preview',
'--disable-prompt-on-repost',
'--disable-renderer-backgrounding',
'--disable-setuid-sandbox',
'--disable-speech-api',
'--disable-sync',
'--hide-scrollbars',
'--ignore-gpu-blacklist',
'--metrics-recording-only',
'--mute-audio',
'--no-default-browser-check',
'--no-first-run',
'--no-pings',
'--no-sandbox',
'--no-zygote',
'--password-store=basic',
'--use-gl=swiftshader',
'--use-mock-keychain']
});
const page = await browser.newPage();
await page.goto(`file://${__dirname}/out/Definition.html`, { waitUntil: 'networkidle0' });
// Generate PDF at default resolution
const pdf = await page.pdf({format: 'A4'});
// Write PDF to file
fs.writeFileSync('default.pdf', pdf);
await browser.close();
await akasha.closeCaches();Timing for just building using the traditional build process: time npm run build
> [email protected] build
> npm-run-all build:copy build:render
> [email protected] build:copy
> akasharender copy-assets config.mjs
> [email protected] build:render
> akasharender render --quiet config.mjs
Could not find the language '{=html}', did you forget to load/include a language module?
real 0m3.579s
user 0m4.205s
sys 0m0.491sThen building using the above script: $ time npx zx build.mjs
Could not find the language '{=html}', did you forget to load/include a language module?
real 0m5.252s
user 0m4.260s
sys 0m0.892s |
|
In Puppeteer the // Generate PDF at default resolution
const pdf2 = await page2.pdf({
format: 'A4',
margin: { top: '20mm', right: '20mm', bottom: '20mm', left: '20mm' },
displayHeaderFooter: true,
headerTemplate: '<div class="title">TITLE GOES HERE</div>',
footerTemplate: '<div>Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>'
}); |
|
For this specification there is a table of information that can be pulled in from JSON schema files. I implemented a Mahafunc to do so, and render through a Nunjucks template. |
|
As for adding an auto-generated Table of Contents. import { default as MarkdownItAnchor } from 'markdown-it-anchor';
import { default as MarkdownItTOC } from 'markdown-it-table-of-contents';
config.findRendererName('.html.md')
// ...
.use(MarkdownItAnchor)
.use(MarkdownItTOC)These two work together to generate a TOC from the header tags. Simply place https://www.npmjs.com/package/markdown-it-hierarchy -- looked like a useful extension to this. It would automatically generate section numbers based on the header hierarchy. While it adds section numbers to the rendered Hn tags, the ToC does not include the section numbers. It would be better to manually insert section numbers. |
|
Old-school support for images was solely the https://www.npmjs.com/package/markdown-it-image-figures Example: |
|
Using In the application, Export As the drawing, and make sure to tick the checkbox that says to include the diagram in the image. The diagram can then be edited later by opening it again in An alternate way to embed diagrams is using PlantUML. The PlantUML extension is installed in the configuration. The PlantUML diagram description is simple text, but which is not well documented. It is recommended to configure the plugin for SVG output. The resulting diagram does render into PDF. Problem 1 - A diagram description that made sense from the documentation inscrutibly gave an error. Problem 2 - After rendering one image subsequent images had a banner with a QR code that presumably requires the payment of a usage fee. If I was to be regularly using PlantUML that might be worthwhile. Actually, carefully reading the website there is nothing about any fee, and everything is GPL. Problem 3 - the most righteous way of using PlantUML is with a local server. But how to manage that in a Node.js build environment? There are some Markdown-IT PlantUML plugins that work with a local plantuml.jar - I didn't try any of them but maybe that's all which is required and the plugin takes care of it. Problem 4 - The diagrams used in the Definitions document are not supported in PlantUML but were easy to draw using |
|
Doing some research into alternatives - jsPDF looks good. There's a simple example that would work something like this: import { promises as fsp } from 'node:fs';
import { jsPDF } from 'jspdf/dist/jspdf.node.js'; // will automatically load the node version
const defs = await fsp.readFile('out/Definition.html', 'utf-8');
const doc = new jsPDF();
// doc.text("Hello world!", 10, 10);
// doc.save("a4.pdf");
doc.html(defs, {
callback: (doc) => {
doc.save(defs.pdf);
}
});But it fails with this message: The stack trace points to the The following issue explains what's going on. Namely - to convert HTML to something the jsPDF library can use, a full DOM implementation is required, which in turn requires a web browser. Their recommendation is using Puppeteer. Yes, I follow that a DOM implementation is required. |
|
Getting header/footer to work requires setting enough CSS styles. Some discussion said that Puppeteer header/footer sections have zero CSS - puppeteer/puppeteer#1853 and puppeteer/puppeteer#10024 headerTemplate: `
<div class="text-center title" style="margin-left: auto; margin-right: auto; font-size: 12px;">TITLE GOES HERE</div>
`,
// headerTemplate: `
// <div class="text-center title" style="margin: 0 15mm 5mm; font-size: 12px;">TITLE GOES HERE</div>
// `,
footerTemplate: `
<div class="text-left" style="margin: 0 auto 0 20mm; text-align: left; font-size: 12px;">Copyright © OpenADR Alliance (2023-24). All Rights Reserved</div>
<div class="text-right" style="margin: 0 20mm 0 auto; text-align: right; font-size: 12px;">Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>
`, |
|
Implementing the page break before/after the Table of Contents. That is, the title page should be on its own page, then the table of contents on a new page, and the content start on a new page. It was necessary to carefully read: https://www.w3schools.com/cssref/pr_print_pagebb.php A Hence, the section for Table of Contents is: <div style="page-break-before: always; page-break-after: always;"> <!-- Your page Content -->
# CONTENTS { #contents .page_break }
[[toc]]
</div>That's one solution - to throw a With the current Mahabhuta-IT configuration, the structure is: <section id="contents" class="page_break" tabindex="-1">
<h1 class="page_break" tabindex="-1">CONTENTS</h1>
... ToC
</h1>
</section>The Hence, this CSS can be used - and therefore avoid putting a section#contents {
page-break-after: always;
page-break-before: always;
}
/* https://stackoverflow.com/questions/22746958/dompdf-adding-a-new-page-to-pdf */
// div.page_break {
// page-break-before: always;
// }Hence, the generated |
|
As cool as the Paged.js project sounds and as comprehensive their approach is ...? Is all we need a good stylesheet for printing? https://printedcss.com/ -- This is one. Simply add it to the stylesheets and the content looks much better. Plus the stylesheet can be tweaked as desired. NOTE - While this made some visual improvement - the page break behavior is strange. There is a page break between the cover page and the CONTENTS section, and there is a page break after the CONTENTS section before the content. But, there is now a page break between the CONTENTS header and the One possibility is this: a, blockquote, canvas, details, dl, figure, img, ol, picture, svg, table, ul {
break-inside: avoid;
page-break-inside: avoid; }Since the table of contents is a big Yes - commenting out " That was found with the query "css style printing" which turns up lots of tutorials. "css stylesheet printing" is a little better. https://gist.github.com/davidhund/0cf7dd437402c5a1dcb7bd701141a4a7 https://iangmcdowell.com/blog/posts/laying-out-a-book-with-css/ https://ebooks.stackexchange.com/questions/6742/any-opensource-or-free-css-stylesheets-for-books http://bbebooksthailand.com/bb-CSS-boilerplate.html https://ideatrash.net/2012/11/my-updated-css-stylesheet-for-ebook.html https://datatracker.ietf.org/doc/rfc7993/ -- Guidance for CSS stylesheets used with IETF RFCs https://design-system.w3.org/ -- The w3c publishes lots of standards. This describes the tools for doing so (CSS and JavaScript anyway) https://www.w3.org/Guide/manual-of-style/ W3C Manual of Style |
|
DO NOT USE markdown-it-hierarchy. It seems like a perfectly wonderful plugin -- automatically generating a numerical hierarchy for H tags in a document. But, if your application processes multiple documents, the numbering will keep increasing for each document. The numbering MUST reset to 1 for each document. |
|
I found an immensely crazy solution for Hn tag numbering that also handles the Table of Contents. It works purely in the CSS so does not require any Markdown or Mahabhuta extension. Perhaps, though, the concept can be turned into some code, because it would be useful for rendered HTML to have these numbers rather than it being generated upon display. https://gist.github.com/rodolfoap/6cd714a65a891c6fe699ab91f0d22384 The concept appears to rely on an implicit tree traversal...? There is a failing - the numbering in the ToC is different from the numbering in the content. This is because the H1 for CONTENTS has There's an implicit failure here. The numbering should be computed in the Hn headers, and have a CSS class to indicate Hn headers that should not be numbered ( A more serious failure is that the numbering in the text is completely wrong. Every H2/H3/etc tag has numbering that starts at 0. It's way to Zen for me at the moment. body {
counter-reset: h1
}
h1 {
counter-reset: h2
}
h2 {
counter-reset: h3
}
h3 {
counter-reset: h4
}
h1:not(.header-title)::before {
counter-increment: h1;
content: counter(h1) ". "
}
h2:before {
counter-increment: h2;
content: counter(h1) "." counter(h2) ". "
}
h3:before {
counter-increment: h3;
content: counter(h1) "." counter(h2) "." counter(h3) ". "
}
h4:before {
counter-increment: h4;
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) ". "
}
ul {
counter-reset: section;
list-style-type: none;
}
ul li {
position: relative;
}
ul li::before {
counter-increment: section;
content: counters(section, ".") ". ";
}
ul ul li::before {
content: counters(section, ".") ". ";
}
ul ul {
counter-reset: section;
} |
|
How to do Citations to Other Technical Documents in a similar way to how IETF or W3C standards do it? That is a section in the document has several things like this - For scientific paper references, there's this: https://medium.com/@oleksandr.kosovan/how-to-cite-a-paper-using-github-markdown-syntax-5a46268c4ff -- Namely, there are multiple formats for Scientific Paper Citations, but they boil down to having a link to For references like are used in Standards Documents: https://stackoverflow.com/questions/26587527/cite-a-paper-using-github-markdown-syntax In the References section, have a list like this: ## References
<a id="1">[1]</a> : Dijkstra, E. W. (1968). Go to statement considered harmful. Communications of the ACM, 11(3), 147-148.Then to refer to it within the document use If the ## References
[1]{#1}: Dijkstra, E. W. (1968). Go to statement considered harmful. Communications of the ACM, 11(3), 147-148.After experimenting several formats - none worked. For example, this entry: Resulted in this output: That's just wrong. Later in the document a reference to this was underlined but not an active link. Inspecting the HTML, the |
|
Created a Mahabhuta function for a) numbering Hn headers in the document, b) generating a Table of Contents from those Hn headers, nesting them as appropriate The auto-numbering technique is similar to the CSS above, but in a Mahabhuta function. |
|
For footnotes -- the document had Pandoc-generated footnotes where The implementation comes from: https://www.npmjs.com/package/markdown-it-footnote It does not rely on the AkashaCMS Footnotes plugin. In fact, that plugin should be deprecated in favor of The presentation was helped by a custom rule as described in the package documentation. To add a custom rule, the Markdown Renderer in the Renderers package had to be changed to expose the |
|
The Table of Contents is a nested UL/LI/UL/LI list. For good semantic HTML, it's preferable to surround it with a It was noted that a nested UL had some blank space above it. It was determined the blank space came from this definition in address, blockquote, details, dl, figure, ol, p, pre, ruby, table, ul {
margin: 1em 0; }So -- In /* This is for the Table of Contents, which is a
* nested ul/li/ul/li list. The nested elements
* had blank space. In print.css there is a
* declaration where ul has margin 1em 0, which means
* margin-top is 1em. This overrides that for lists
* with class list-no-margin.
*
* UPDATE: It was discovered that every nested UL/LI
* list had this issue. So, we simply apply the
* override to every <ul>
*/
ul.list-no-margin, ul {
margin-top: 0em;
}And, in the Table of Contents Mahabhuta function, the template has Elsewhere in the text is another nested UL/LI/UL/LI structure. It also had the blank space. I first experimented with applying this to all UL elements. But that did not fix the problem. Instead, adding Because the Mahabhuta-it-Attrs plugin is installed the method is: In other words, the |
|
It's not possible to add a caption to a code block. All through the OpenADR spec we see this: That is, there's a normal code block, following which is a Figure n. label. It would be correct to tie the two together. But, there is not a Markdown-IT extension for this. This article discusses the problem and says there has been discussion in the Commonmark community, but no agreed-upon syntax. https://thesynack.com/posts/codeblock-labels-markdown/ In According to MSDN the This does say it can be used with Hence, this is handled somewhat okay: <figure>
<pre><code class="json">
{
"title": "Not Found",
"status": 404,
"detail": "Unrecognized URL"
}
</code></pre>
<figcaption>
<strong>Figure 3. Problem Example</strong>
</figcaption>
</figure>But - the code block is not properly highlighted, meaning highlight.js doesn't see it, and the code block is centered rather than left-aligned. But, the caption is part of the figure. Here's a screen capture:
Further, why are we using Markdown to switch to HTML for something so important? The markdown-it-anchors https://www.npmjs.com/package/markdown-it-attrs package allows this: Which outputs as this: <pre><code data="asdf" class="language-python">
nums = [x for x in range(10)]
</code></pre>But it appears this doesn't allow a caption? Trying this in the document Results in this output: <pre><code data="asdf" caption="Figure 3. Problem Example" class="language-json">Hence, this is like the example. But the caption attribute does not show up anywhere, and further highlight.js no longer recognizes that code block for highlighting.
|
|
There are multiple choices for embedding UML or other diagrams in Markdown documents. One choice is using PlantUML has the advantage of a textual description in the Markdown, and embedding the actual diagram as an SVG which can then be manipulated using CSS or JavaScript at run time. https://mermaid.js.org/ - Mermaid is similar to PlantUML, a textual description of diagrams. The documentation for Mermaid is extremely better than for PlantUML. But, it is not certain how to implement Mermaid in the same way - and instead that Mermaid can only be rendered by browser-side code in a web browser. If so, a page using Mermaid must have JavaScript at the bottom to cause Mermaid drawings to be rendered in the browser, and only after the drawings are rendered to print the document to PDF. There are multiple Mermaid plugins for Markdown-IT. This one appears to be the most up-to-date: https://www.npmjs.com/package/@liradb2000/markdown-it-mermaid https://www.npmjs.com/package/@mermaid-js/mermaid-cli is a command-line tool for rendering Mermaid documents to SVG. Ergo, a directory tree of Mermaid documents could exist, and this tool is used to render to SVG, that can then be included using an https://www.npmjs.com/package/markdown-it-textual-uml This package supports PlantUML, Mermaid, and two other packages for rendering drawings. Mermaid can be used on GitHub sequenceDiagram
Alice->>Bob: Hello Bob, how are you ?
Bob->>Alice: Fine, thank you. And you?
create participant Carl
Alice->>Carl: Hi Carl!
create actor D as Donald
Carl->>D: Hi!
destroy Carl
Alice-xCarl: We are too many
destroy Bob
Bob->>Alice: I agree
One way that might work to support Mermaid is to ignore the Markdown-IT plugin. Instead, write a custom tag The Mermaid code should not execute on every page, but only on pages where it is needed. Therefore it would be incorrect for an AkashaCMS project to use |
|
Prism is an alternative to Highlight.js for code highlighting. https://prismjs.com/ -- Package home page https://www.npmjs.com/package/markdown-it-prism - Markdown-IT plugin While it appears Prism is meant for browser-side highlighting, it supports server-side on Node.js. |
|
Issues found on FIrst - Home page thumbs were gigantic. This turned out to be that LESS to CSS compilation didn't work right. This had been observed with the PDF production but not recognized. This is now fixed. Second - Directly calling The fix is to change this existing element to call <affiliate-product-link
random="yes"
href="/lifestyle/geek-gear.html">
</affiliate-product-link>Adding |
Long-standing question for AkashaCMS is producing PDF from content for AkashaCMS e.g. EPUB. The prompting for this current work is related to a protocol specification that is being converted to Markdown, for which the standards org needs to produce a PDF.
https://github.com/alanshaw/markdown-pdf -- Uses the Remarkable toolchain, does a conversion of Markdown to HTML, then uses PhantomJS to print that to PDF.
With AkashaCMS - setup a project with templates etc - convert the Markdown or AsciiDoc to HTML as is typical for AkashaCMS. Then, the HTML needs to become a single HTML, with the content of each HTML in place, and a page break between each block of HTML. Probably -
<section id="file-1">...</section><section id="file-2">...</section>.... Then, as is done in markdown-pdf, use PhantomJS to print it to PDF.This gives the option of fancy layout and styling that makes its way into the PDF.
If the input were an EPUB document tree, then you'd have the TOC to guide the ordering of HTML files.
I notice that the markdown-pdf repository has several issues requesting that the project switch away from PhantomJS to something else because Phantom is no longer supported.
https://www.npmjs.com/package/mdpdf is a very similar package that uses Puppeteer under the covers.
The text was updated successfully, but these errors were encountered: