Fully self-contained HTML files with Pandoc

debugcn Published at Dev

SAAD

I have little knowledge in HTML and Javascript, and I want to know the following:

I have a master HTML file which contains some text, images ... and it also contains internal references to other local HTML files, which are put in a relative directory. Is it possible to make a fully self-contained HTML file, where the other files are still referenced by URL links but their content is simply recorded in the master file ?

I had this problem using the --self-contained option in Pandoc, which only writes all the necessary stuff (CSS stylesheet, ...) into the HTML header, while the master HTML document still needs the "see" the actual local files.

So far, I tried the iframe tag, but it is always opened, and is not simple put in a page,like a one-line URL link. I have read this answer using HTML+javascript but I am not sure if this compatible with Pandoc.

Anyone who can help me understand the difficulty of such task ?

mschilli

You could convert your sub HTMLs into Base64 strings and link them using the Data URI scheme in your main HTML:

Create your sub HTML file:

<!-- sub.html -->
<html>
 <head>
  <title>
   Sub HTML
  </title>
 </head>
<body>
 <h1>Sub HTML</h1>
 <p>This is the Sub HTML.</p>
</body>
</html>

Convert its file content to Base64 (e.g. using base64encode.org):

PCEtLSBzdWIuaHRtbCAtLT4NCjxodG1sPg0KIDxoZWFkPg0KICA8dGl0bGU+DQogICBTdWIgSFRNTA0KICA8L3RpdGxlPg0KIDwvaGVhZD4NCjxib2R5Pg0KIDxoMT5TdWIgSFRNTDwvaDE+DQogPHA+VGhpcyBpcyB0aGUgU3ViIEhUTUwuPC9wPg0KPC9ib2R5Pg0KPC9odG1sPg==

Create your main HTML linking the sub HTML by a Data URI with the Base64 encoding of the target file:

<!-- main.html -->
<html>
 <head>
  <title>
   Main HTML
  </title>
 </head>
<body>
 <h1>Main HTML</h1>
 <p> This is the Main HTML. </p>
 <p>
  <a href="sub.html">
    This link to the sub HTML
  </a>
  references the target by its (relative) path and won't work without the
  2nd file.
  <br>
  <a href="data:text/html
          ;UFT8
          ;base64,PCEtLSBzdWIuaHRtbCAtLT4NCjxodG1sPg0KIDxoZWFkPg0KICA8dGl0b
                  GU+DQogICBTdWIgSFRNTA0KICA8L3RpdGxlPg0KIDwvaGVhZD4NCjxib2
                  R5Pg0KIDxoMT5TdWIgSFRNTDwvaDE+DQogPHA+VGhpcyBpcyB0aGUgU3V
                  iIEhUTUwuPC9wPg0KPC9ib2R5Pg0KPC9odG1sPg==
          ">
    This link to the sub HTML
  </a>
  references the target by its Base64 encoding and will work without the
  2nd file.
 </p>
</body>
</html>

edit:

Since the question was specifically asked about pandoc, here is the above example using Markdown:

Create your sub Markdown file:

# Sub HTML

This is the sub HTML.

Convert your sub Markdown file to HTML using pandoc:

pandoc sub.md > sub.html

Convert your sub HTML file to Base64:

base64 < sub.html

PGgxIGlkPSJzdWItaHRtbCI+U3ViIEhUTUw8L2gxPgo8cD5UaGlzIGlzIHRoZSBzdWIgSFRNTC48 L3A+Cg==

Create your main Markdown file referencing the sub HTML file by a Data URI:

# Main HTML

This is the main HTML.

[This link to the sub HTML][relative_path] references the target by its
(relative) path and won't work without the 2nd file.
[This link to the sub HTML][data_uri] references the target by its Base64
encoding and will work without the 2nd file.

[relative_path]: sub.html
[data_uri]: data:text/html;ASCII-US;base64,PGgxIGlkPSJzdWItaHRtbCI+U3ViIEhU
TUw8L2gxPgo8cD5UaGlzIGlzIHRoZSBzdWIgSFRNTC48L3A+Cg==

Convert your main Markdown file to HTML using pandoc:

pandoc main.md > main.html

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-07-12

Comments

0 comments

From Dev

Related Related

Article