4

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 ?

Community
  • 1
  • 1
SAAD
  • 759
  • 1
  • 9
  • 23
  • I'm not understanding the question. JavaScript can build HTML, and you should use external script `src`s anyways. – StackSlave Oct 02 '15 at 23:17
  • Regardless of how to do it, the question is it possible to write `slave.html` entirely within `master.html` then call it using a normal hyperlink ? – SAAD Oct 03 '15 at 00:06
  • In JavaScript other script tags have access to the script above. – StackSlave Oct 03 '15 at 00:11
  • I'll try to read more about Javascript to understand how it can build HTML, because it has to be done through Pandoc in my case. – SAAD Oct 03 '15 at 00:15
  • are you asking how to generate a HTML file that contains links to all files within some folder? if so, this has nothing to do with pandoc. and yes, you can do that with javascript (with node.js) but you can just as well do it with any other programming language. – mb21 Oct 06 '15 at 11:10
  • @mb21 I am fully aware that any HTML document can contain links to local files, and that is **independant** of Pandoc. However, sharing this document, requires also sharing the directory containing the local files. Assuming that these local files are of HTML format, my question is how can I store all the content from every local file within the master HTML while using the link shape to open them. This way, sharing the master HTML requires no further dependency. – SAAD Oct 06 '15 at 11:31

2 Answers2

3

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

  1. 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>
  1. Convert its file content to Base64 (e.g. using base64encode.org):

PCEtLSBzdWIuaHRtbCAtLT4NCjxodG1sPg0KIDxoZWFkPg0KICA8dGl0bGU+DQogICBTdWIgSFRNTA0KICA8L3RpdGxlPg0KIDwvaGVhZD4NCjxib2R5Pg0KIDxoMT5TdWIgSFRNTDwvaDE+DQogPHA+VGhpcyBpcyB0aGUgU3ViIEhUTUwuPC9wPg0KPC9ib2R5Pg0KPC9odG1sPg==

  1. 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:

  1. Create your sub Markdown file:
# Sub HTML

This is the sub HTML.
  1. Convert your sub Markdown file to HTML using pandoc:
pandoc sub.md > sub.html
  1. Convert your sub HTML file to Base64:
base64 < sub.html

PGgxIGlkPSJzdWItaHRtbCI+U3ViIEhUTUw8L2gxPgo8cD5UaGlzIGlzIHRoZSBzdWIgSFRNTC48 L3A+Cg==

  1. 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==
  1. Convert your main Markdown file to HTML using pandoc:
pandoc main.md > main.html
mschilli
  • 1,884
  • 1
  • 26
  • 56
0

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).

mb21
  • 34,845
  • 8
  • 116
  • 142
  • I will need to try the HTML snippet you gave, although I dont see how "my-section" would be hidden before clicking the corresponding link. I really find it interesting if a Pandoc filter would do it upon calling for instance `include{file_to_link.html}` in the markdown source, I am still a beginner in these stuff – SAAD Oct 06 '15 at 13:42
  • The snippet doesn't include the JS to hide stuff, just scroll to the header. I think there are pandoc filters to include files, but you can also just concatenate them like `pandoc file1.md file2.md` – mb21 Oct 06 '15 at 14:02
  • 1
    The pandoc manual concatenation will include all the markdown content in their command line order, therefore everything will be visible in the HTML output. The `include{file_to_link.html} ` in my suggestion would implement something similar to your answer or the accepted answer of this [**question**](http://stackoverflow.com/questions/9517286/how-to-hide-show-sections-of-a-html-form) – SAAD Oct 06 '15 at 14:28
  • 1
    should not be too difficult to write a script to collect the files, wrap them in the `div`s like in the answer you linked to and then pass that to pandoc, which allows raw-html inlined in its markdown. – mb21 Oct 06 '15 at 15:13