javascript - Fully self-contained HTML files with Pandoc

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 patible with Pandoc.

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

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

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

Share Improve this question edited May 23, 2017 at 12:07 CommunityBot 11 silver badge asked Oct 2, 2015 at 23:05 SAAD 7891 gold badge9 silver badges23 bronze badges

I'm not understanding the question. JavaScript can build HTML, and you should use external script srcs anyways. – StackSlave Commented Oct 2, 2015 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 Commented Oct 3, 2015 at 0:06
In JavaScript other script tags have access to the script above. – StackSlave Commented Oct 3, 2015 at 0: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 Commented Oct 3, 2015 at 0: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 Commented Oct 6, 2015 at 11:10

| Show 1 more ment

2 Answers 2

Sorted by: Reset to default 4

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

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

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

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744515754a4578263.html

javascript - Fully self-contained HTML files with Pandoc - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Fully self-contained HTML files with Pandoc - Stack Overflow

2 Answers 2

相关推荐