Fully self-contained HTML files with Pandoc

Question

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 ?

Answer 1

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 (eg 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

Answer 2

Usually one HTML file is referenced by one URL, so when you follow links and change the URL you navigate to a new file. To somehow package multiple files, for example the EPUB file format has been invented (is essentially a zipped collection of HTML files, pandoc can also generate it).

Other than that, you could use hash links to link to data in the same HTML file, like:

See <a href="#my-section">section 1</a>.

<h1 id="my-section">My section</h1>

You could then also craft some JavaScript and embed it in the HTML file. That JavaScript would then hide all sections except the one that is currently in the hash of the browser (as in myhtmlfile.html#my-section ).

Fully self-contained HTML files with Pandoc

Question

2 answers

solution1
2 ACCPTED 2016-02-06 10:09:26

solution2
0 2015-10-06 12:17:05

Fully self-contained HTML files with Pandoc

Question

2 answers

solution1 2 ACCPTED 2016-02-06 10:09:26

solution2 0 2015-10-06 12:17:05

solution1
2 ACCPTED 2016-02-06 10:09:26

solution2
0 2015-10-06 12:17:05