If you are using kaushalmodi/hugo-debugprint with your theme using Bootstrap 4, then the following SCSS rules will format the generated tables quite nicely (no need to add the CSS rules @kaushalmodi added in the repo):
table.debugprint {
@extend .table-dark;
@extend .table-bordered;
@extend .table-sm;
@extend .mb-3;
@extend .w-100;
.key {
min-width:100px;
width:20%;
}
}
Replace the line @extend .table-dark;
with @extend .table;
if your background is light where you debug. In my case it’s a dark footer, so I chose .table-dark to color it properly.
I have the following code in my footer to debug “locally” (only when hugo server
is used):
{{ if .Site.IsServer }}
{{ partial "debugprint.html" . }}
{{ partial "debugprint.html" .Params }}
{{ partial "debugprint.html" site }}
{{ partial "debugprint.html" site.Menus }}
{{ partial "debugprint.html" .Resources }}
{{ partial "debugprint.html" .File }}
{{ end }}