Display html/html.file from *.md file

support
1

I have a LibreOffice spreadsheet that I have converted to a HTML file at https://tableizer.journalistopia.com/. I am trying to show this file on my Hugo website.

When I view this file with my web browser (Firefox) it shows up just the way I want it.

I have tried including the HTML code within my *.md but nothing shows when I build the site. I have read some articles of linking to the file from the *.md file but they were talking about *.json files not *.html or would it work with either type of file?

Is there something I need to include in the *.md file to show the code is actually HTML code?

Thanks.

2

I think the best way to show a HTML file is to put it to a static folder (Static Files | Hugo), Hugo will serve it but will not generate it like a Markdown file.

(You can also display HTML content into a Markdown file, but:

  1. be careful of having two head (I don’t know how your HTML file is structured
  2. you must have a right config with unsafe = right for Goldmark rendering (Configure Markup | Hugo))
3

Thanks for the quick info. I will give it a try tomorrow as it is getting late here. Will let you know how it works.

4

Something I like to do in this situation is build a new page layout in the /layouts/_default directory that will display the other HTML generated files in my site as an iframe, that way I can still display my site’s header and search.

so you’d do something like this:

  1. create a layout (eg, spreads.html)
  2. input something like this:
{{ define "main" }}
<div class="">
    <iframe id="inlineFrameExample"
    title="Inline Frame Example"
    src="/path/to/your/spreadsheet.html"
    class="blah blah"
    >
</iframe>
</div>

{{end}}
  1. Create a new markdown page in content/ directory.
  2. Add layout: spreads to the frontmatter. This will override your default layout to the one you specified.
5

Here’s the Tableizer output for a simple spreadsheet (header, 2 rows, 2 columns):

HTML 
<style type="text/css">
	table.tableizer-table {
		font-size: 12px;
		border: 1px solid #CCC; 
		font-family: Arial, Helvetica, sans-serif;
	} 
	.tableizer-table td {
		padding: 4px;
		margin: 3px;
		border: 1px solid #CCC;
	}
	.tableizer-table th {
		background-color: #104E8B; 
		color: #FFF;
		font-weight: bold;
	}
</style>
<table class="tableizer-table">
  <thead>
    <tr class="tableizer-firstrow">
      <th>type</th>
      <th>name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>dog</td>
      <td>spot</td>
    </tr>
    <tr>
      <td>cat</td>
      <td>felix</td>
    </tr>
  </tbody>
</table>

If you paste this into the body element of an HTML file, validation will fail. The validator expects all style elements to be within the head element. If we move the CSS to a stylesheet, we’re left with this:

HTML 
<table class="tableizer-table">
  <thead>
    <tr class="tableizer-firstrow">
      <th>type</th>
      <th>name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>dog</td>
      <td>spot</td>
    </tr>
    <tr>
      <td>cat</td>
      <td>felix</td>
    </tr>
  </tbody>
</table>

If you paste this into a markdown document and build your site, the table will not appear. Why? View the source (typically Ctrl+U) in your browser:

<!-- raw HTML omitted -->

By default, the markdown renderer (Goldmark) considers raw HTML within markdown to be unsafe. To include HTML in your markdown, change your site configuration:

[markup.goldmark.renderer]
unsafe = true

It’s not unsafe if you control the content.

If you frequently use spreadsheet data to build tables, consider exporting to CSV, then use a shortcode to render the table.

1 Like
6

Thanks to all who contributed to my question.
I finally figured out how to do what I wanted.

I stored the *.HTML files in the /static directory and then in my *.md file I entered ![Table name](/filename.HTML). It would display the Table name but not the Table. I then removed the “!” and it displayed the table.

What I liked about the Tablizer program is that it created a box around each cell to make each one stand out more.
When I exported the spreadsheet from LibreOffice it would create the HTML file but without the grid lines to define the rows and columns…
I currently have 15 columns and 57 rows so without the grid lines it made it hard to read.

Again, Thanks to all who showed me the light on how to get it accomplished.

1 Like