Table in markdown

1

I need a special look for some tables. In the styles.css I made the following entries. Now all tables are changed accordingly.

table {
  border-collapse: collapse;
  width: 100%;
}
td {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 0.6rem;
}

For most tables I need the normal markdown.
How can I redefine these in styles.css and call them in the corresponding md file?

2

So if I understand correctly, you want to customize a few tables in your post but leave the default output for tables the same? Then what you’re looking for is shortcodes.

That should not be too hard. I think the hardest is Markdown tables allow for headings by having dashes on the next line. Supporting this feature means you can’t just parse the markdown and generate HTML at the same time; you would need to parse the second line before being able to display the first line.

Also, a nice HTML5 trick that may help you out testing things out before you change your CSS: the <style> tag can take a scoped="scoped" param so that it may be placed within the HTML body, and only applies to the style tag’s parent and siblings. This allows you to have both HTML and CSS right next to you when trying things out :slight_smile:

1 Like
3

Thank you for your answer. I am not sure if I understand what I have to do.

here is the shortcode/table.html

<div class='table'>
  {{ .Inner }}
</div>

the contact.md

{{% table %}}
|          |                    |
|----------|--------------------|
| Telefon: | +49 (0) 1234567890 |
| Telefax: | +49 (0) 1234567890 |
{{% /table %}}

the styles.css. This code change all tables in the hole project. I want only change the table above.

 table {
  border-collapse: collapse;
  width: 100%;
}
td {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 0.6rem;
}
4

Actually, forget my previous comment. You don’t have to parse the content, you can use the markdownify function on the content like so:

{{ .Inner | markdownify }}

Then that’s some basic HTML/CSS concern to match only tables within your shortcode div with .table table and .table td. My advice: pick a more specific class name for your special tables, otherwise you may not understand by reading your CSS what this .table class actually is.

5

Thank you for the help. It works fine.

6

@bep Would you please reconsider adding a generic “classify” shortcode to support cases like this?

Ref:

7

What I would need is a pool of shortcodes to “steal” from.
Currently I’ve to browse the themes, this forum and tplimpl/template_embedded.go for inspiration.

Why not leave the shortcodes to the themes an projects but provide the authors with many examples.

btw: a generic classify would not hardcode div since span with classes may be useful as well (as long there are no block’s inside).

8

Certainly. The shortcode can have an optional parameter, which if unset uses div tags, and if set, uses the set value as tags.

9

are you aware that in that specific sample above you should write .table in your css? you are giving a class table to the table, then defining all tables by using table in css. only .table will add the special design to those shortcoded tables.

edit: or to be specific: .table table will apply the 100% width.

.table table {
  border-collapse: collapse;
  width: 100%;
}
.table td {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding: 0.6rem;
}
10

A pool of shortcodes is a great idea. A repo on Github is my idea.

A markdown file with the shortcode and an explanation of which task the shortcode fulfills. The question is, how do we categorize and catalog the shortcodes?

11

I currently document shortcodes like this:
This Theme Shortcodes

Some shortcodes have prerequisites (like images). To

an explanation of which task the shortcode fulfills

I would add “a working example for each shortcode”.

how do we categorize and catalog the shortcodes

Yes - this is a good question.

For the themes there is a theme.toml in each theme providing some tags and features.

1 Like
12

First of all, you did an amazing job at documenting all that!

With this feature planned for the next release:

https://github.com/gohugoio/hugo/issues/4460

It should be possible to have “shortcode pack” themes, and then the theme.toml in those can specify the tags as appropriate. I am eagerly waiting for that feature to be out :slight_smile:

1 Like
13

Maybe this guide help solve your situation:
https://www.mybluelinux.com/how-create-bootstrap-tables-in-hugo/

14

@rrastik Please do not keep resurrecting old posts. Also, this is now the second time you are posting the same link. Please do not keep posting the same link.

15