htmldocumentationminifynotion

How to unminify / format html without changing the formatting?

I have a minified HTML file (specificially: an exported HTML from Notion.so) and want to make it editable by unminifying it.

The issue is that when I format the HTML, the user interface breaks.

Minified HTML

image 1



Formatted HTML

image 2



Here is the original html

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>(Minified) Blog Post</title><style>
/* cspell:disable-file */
/* webkit printing magic: print all background colors */
html {
    -webkit-print-color-adjust: exact;
}
* {
    box-sizing: border-box;
    -webkit-print-color-adjust: exact;
}

html,
body {
    margin: 0;
    padding: 0;
}
@media only screen {
    body {
        margin: 2em auto;
        max-width: 900px;
        color: rgb(55, 53, 47);
    }
}

body {
    line-height: 1.5;
    white-space: pre-wrap;
}

a,
a.visited {
    color: inherit;
    text-decoration: underline;
}

.pdf-relative-link-path {
    font-size: 80%;
    color: #444;
}

h1,
h2,
h3 {
    letter-spacing: -0.01em;
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: 0;
}

.page-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0.75em;
}

h1 {
    font-size: 1.875rem;
    margin-top: 1.875rem;
}

h2 {
    font-size: 1.5rem;
    margin-top: 1.5rem;
}

h3 {
    font-size: 1.25rem;
    margin-top: 1.25rem;
}

.source {
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 1.5em;
    word-break: break-all;
}

.callout {
    border-radius: 3px;
    padding: 1rem;
}

figure {
    margin: 1.25em 0;
    page-break-inside: avoid;
}

figcaption {
    opacity: 0.5;
    font-size: 85%;
    margin-top: 0.5em;
}

mark {
    background-color: transparent;
}

.indented {
    padding-left: 1.5em;
}

hr {
    background: transparent;
    display: block;
    width: 100%;
    height: 1px;
    visibility: visible;
    border: none;
    border-bottom: 1px solid rgba(55, 53, 47, 0.09);
}

img {
    max-width: 100%;
}

@media only print {
    img {
        max-height: 100vh;
        object-fit: contain;
    }
}

@page {
    margin: 1in;
}

.collection-content {
    font-size: 0.875rem;
}

.column-list {
    display: flex;
    justify-content: space-between;
}

.column {
    padding: 0 1em;
}

.column:first-child {
    padding-left: 0;
}

.column:last-child {
    padding-right: 0;
}

.table_of_contents-item {
    display: block;
    font-size: 0.875rem;
    line-height: 1.3;
    padding: 0.125rem;
}

.table_of_contents-indent-1 {
    margin-left: 1.5rem;
}

.table_of_contents-indent-2 {
    margin-left: 3rem;
}

.table_of_contents-indent-3 {
    margin-left: 4.5rem;
}

.table_of_contents-link {
    text-decoration: none;
    opacity: 0.7;
    border-bottom: 1px solid rgba(55, 53, 47, 0.18);
}

table,
th,
td {
    border: 1px solid rgba(55, 53, 47, 0.09);
    border-collapse: collapse;
}

table {
    border-left: none;
    border-right: none;
}

th,
td {
    font-weight: normal;
    padding: 0.25em 0.5em;
    line-height: 1.5;
    min-height: 1.5em;
    text-align: left;
}

th {
    color: rgba(55, 53, 47, 0.6);
}

ol,
ul {
    margin: 0;
    margin-block-start: 0.6em;
    margin-block-end: 0.6em;
}

li > ol:first-child,
li > ul:first-child {
    margin-block-start: 0.6em;
}

ul > li {
    list-style: disc;
}

ul.to-do-list {
    padding-inline-start: 0;
}

ul.to-do-list > li {
    list-style: none;
}

.to-do-children-checked {
    text-decoration: line-through;
    opacity: 0.375;
}

ul.toggle > li {
    list-style: none;
}

ul {
    padding-inline-start: 1.7em;
}

ul > li {
    padding-left: 0.1em;
}

ol {
    padding-inline-start: 1.6em;
}

ol > li {
    padding-left: 0.2em;
}

.mono ol {
    padding-inline-start: 2em;
}

.mono ol > li {
    text-indent: -0.4em;
}

.toggle {
    padding-inline-start: 0em;
    list-style-type: none;
}

/* Indent toggle children */
.toggle > li > details {
    padding-left: 1.7em;
}

.toggle > li > details > summary {
    margin-left: -1.1em;
}

.selected-value {
    display: inline-block;
    padding: 0 0.5em;
    background: rgba(206, 205, 202, 0.5);
    border-radius: 3px;
    margin-right: 0.5em;
    margin-top: 0.3em;
    margin-bottom: 0.3em;
    white-space: nowrap;
}

.collection-title {
    display: inline-block;
    margin-right: 1em;
}

.page-description {
    margin-bottom: 2em;
}

.simple-table {
    margin-top: 1em;
    font-size: 0.875rem;
    empty-cells: show;
}
.simple-table td {
    height: 29px;
    min-width: 120px;
}

.simple-table th {
    height: 29px;
    min-width: 120px;
}

.simple-table-header-color {
    background: rgb(247, 246, 243);
    color: black;
}
.simple-table-header {
    font-weight: 500;
}

time {
    opacity: 0.5;
}

.icon {
    display: inline-block;
    max-width: 1.2em;
    max-height: 1.2em;
    text-decoration: none;
    vertical-align: text-bottom;
    margin-right: 0.5em;
}

img.icon {
    border-radius: 3px;
}

.user-icon {
    width: 1.5em;
    height: 1.5em;
    border-radius: 100%;
    margin-right: 0.5rem;
}

.user-icon-inner {
    font-size: 0.8em;
}

.text-icon {
    border: 1px solid #000;
    text-align: center;
}

.page-cover-image {
    display: block;
    object-fit: cover;
    width: 100%;
    max-height: 30vh;
}

.page-header-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.page-header-icon-with-cover {
    margin-top: -0.72em;
    margin-left: 0.07em;
}

.page-header-icon img {
    border-radius: 3px;
}

.link-to-page {
    margin: 1em 0;
    padding: 0;
    border: none;
    font-weight: 500;
}

p > .user {
    opacity: 0.5;
}

td > .user,
td > time {
    white-space: nowrap;
}

input[type="checkbox"] {
    transform: scale(1.5);
    margin-right: 0.6em;
    vertical-align: middle;
}

p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.image {
    border: none;
    margin: 1.5em 0;
    padding: 0;
    border-radius: 0;
    text-align: center;
}

.code,
code {
    background: rgba(135, 131, 120, 0.15);
    border-radius: 3px;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 85%;
    tab-size: 2;
}

code {
    color: #eb5757;
}

.code {
    padding: 1.5em 1em;
}

.code-wrap {
    white-space: pre-wrap;
    word-break: break-all;
}

.code > code {
    background: none;
    padding: 0;
    font-size: 100%;
    color: inherit;
}

blockquote {
    font-size: 1.25em;
    margin: 1em 0;
    padding-left: 1em;
    border-left: 3px solid rgb(55, 53, 47);
}

.bookmark {
    text-decoration: none;
    max-height: 8em;
    padding: 0;
    display: flex;
    width: 100%;
    align-items: stretch;
}

.bookmark-title {
    font-size: 0.85em;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 1.75em;
    white-space: nowrap;
}

.bookmark-text {
    display: flex;
    flex-direction: column;
}

.bookmark-info {
    flex: 4 1 180px;
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bookmark-image {
    width: 33%;
    flex: 1 1 180px;
    display: block;
    position: relative;
    object-fit: cover;
    border-radius: 1px;
}

.bookmark-description {
    color: rgba(55, 53, 47, 0.6);
    font-size: 0.75em;
    overflow: hidden;
    max-height: 4.5em;
    word-break: break-word;
}

.bookmark-href {
    font-size: 0.75em;
    margin-top: 0.25em;
}

.sans { font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; }
.code { font-family: "SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace; }
.serif { font-family: Lyon-Text, Georgia, ui-serif, serif; }
.mono { font-family: iawriter-mono, Nitti, Menlo, Courier, monospace; }
.pdf .sans { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol", 'Twemoji', 'Noto Color Emoji', 'Noto Sans CJK JP'; }
.pdf:lang(zh-CN) .sans { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol", 'Twemoji', 'Noto Color Emoji', 'Noto Sans CJK SC'; }
.pdf:lang(zh-TW) .sans { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol", 'Twemoji', 'Noto Color Emoji', 'Noto Sans CJK TC'; }
.pdf:lang(ko-KR) .sans { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol", 'Twemoji', 'Noto Color Emoji', 'Noto Sans CJK KR'; }
.pdf .code { font-family: Source Code Pro, "SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK JP'; }
.pdf:lang(zh-CN) .code { font-family: Source Code Pro, "SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK SC'; }
.pdf:lang(zh-TW) .code { font-family: Source Code Pro, "SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK TC'; }
.pdf:lang(ko-KR) .code { font-family: Source Code Pro, "SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK KR'; }
.pdf .serif { font-family: PT Serif, Lyon-Text, Georgia, ui-serif, serif, 'Twemoji', 'Noto Color Emoji', 'Noto Serif CJK JP'; }
.pdf:lang(zh-CN) .serif { font-family: PT Serif, Lyon-Text, Georgia, ui-serif, serif, 'Twemoji', 'Noto Color Emoji', 'Noto Serif CJK SC'; }
.pdf:lang(zh-TW) .serif { font-family: PT Serif, Lyon-Text, Georgia, ui-serif, serif, 'Twemoji', 'Noto Color Emoji', 'Noto Serif CJK TC'; }
.pdf:lang(ko-KR) .serif { font-family: PT Serif, Lyon-Text, Georgia, ui-serif, serif, 'Twemoji', 'Noto Color Emoji', 'Noto Serif CJK KR'; }
.pdf .mono { font-family: PT Mono, iawriter-mono, Nitti, Menlo, Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK JP'; }
.pdf:lang(zh-CN) .mono { font-family: PT Mono, iawriter-mono, Nitti, Menlo, Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK SC'; }
.pdf:lang(zh-TW) .mono { font-family: PT Mono, iawriter-mono, Nitti, Menlo, Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK TC'; }
.pdf:lang(ko-KR) .mono { font-family: PT Mono, iawriter-mono, Nitti, Menlo, Courier, monospace, 'Twemoji', 'Noto Color Emoji', 'Noto Sans Mono CJK KR'; }
.highlight-default {
    color: rgba(55, 53, 47, 1);
}
.highlight-gray {
    color: rgba(120, 119, 116, 1);
    fill: rgba(120, 119, 116, 1);
}
.highlight-brown {
    color: rgba(159, 107, 83, 1);
    fill: rgba(159, 107, 83, 1);
}
.highlight-orange {
    color: rgba(217, 115, 13, 1);
    fill: rgba(217, 115, 13, 1);
}
.highlight-yellow {
    color: rgba(203, 145, 47, 1);
    fill: rgba(203, 145, 47, 1);
}
.highlight-teal {
    color: rgba(68, 131, 97, 1);
    fill: rgba(68, 131, 97, 1);
}
.highlight-blue {
    color: rgba(51, 126, 169, 1);
    fill: rgba(51, 126, 169, 1);
}
.highlight-purple {
    color: rgba(144, 101, 176, 1);
    fill: rgba(144, 101, 176, 1);
}
.highlight-pink {
    color: rgba(193, 76, 138, 1);
    fill: rgba(193, 76, 138, 1);
}
.highlight-red {
    color: rgba(212, 76, 71, 1);
    fill: rgba(212, 76, 71, 1);
}
.highlight-gray_background {
    background: rgba(241, 241, 239, 1);
}
.highlight-brown_background {
    background: rgba(244, 238, 238, 1);
}
.highlight-orange_background {
    background: rgba(251, 236, 221, 1);
}
.highlight-yellow_background {
    background: rgba(251, 243, 219, 1);
}
.highlight-teal_background {
    background: rgba(237, 243, 236, 1);
}
.highlight-blue_background {
    background: rgba(231, 243, 248, 1);
}
.highlight-purple_background {
    background: rgba(244, 240, 247, 0.8);
}
.highlight-pink_background {
    background: rgba(249, 238, 243, 0.8);
}
.highlight-red_background {
    background: rgba(253, 235, 236, 1);
}
.block-color-default {
    color: inherit;
    fill: inherit;
}
.block-color-gray {
    color: rgba(120, 119, 116, 1);
    fill: rgba(120, 119, 116, 1);
}
.block-color-brown {
    color: rgba(159, 107, 83, 1);
    fill: rgba(159, 107, 83, 1);
}
.block-color-orange {
    color: rgba(217, 115, 13, 1);
    fill: rgba(217, 115, 13, 1);
}
.block-color-yellow {
    color: rgba(203, 145, 47, 1);
    fill: rgba(203, 145, 47, 1);
}
.block-color-teal {
    color: rgba(68, 131, 97, 1);
    fill: rgba(68, 131, 97, 1);
}
.block-color-blue {
    color: rgba(51, 126, 169, 1);
    fill: rgba(51, 126, 169, 1);
}
.block-color-purple {
    color: rgba(144, 101, 176, 1);
    fill: rgba(144, 101, 176, 1);
}
.block-color-pink {
    color: rgba(193, 76, 138, 1);
    fill: rgba(193, 76, 138, 1);
}
.block-color-red {
    color: rgba(212, 76, 71, 1);
    fill: rgba(212, 76, 71, 1);
}
.block-color-gray_background {
    background: rgba(241, 241, 239, 1);
}
.block-color-brown_background {
    background: rgba(244, 238, 238, 1);
}
.block-color-orange_background {
    background: rgba(251, 236, 221, 1);
}
.block-color-yellow_background {
    background: rgba(251, 243, 219, 1);
}
.block-color-teal_background {
    background: rgba(237, 243, 236, 1);
}
.block-color-blue_background {
    background: rgba(231, 243, 248, 1);
}
.block-color-purple_background {
    background: rgba(244, 240, 247, 0.8);
}
.block-color-pink_background {
    background: rgba(249, 238, 243, 0.8);
}
.block-color-red_background {
    background: rgba(253, 235, 236, 1);
}
.select-value-color-interactiveBlue { background-color: rgba(35, 131, 226, .07); }
.select-value-color-pink { background-color: rgba(245, 224, 233, 1); }
.select-value-color-purple { background-color: rgba(232, 222, 238, 1); }
.select-value-color-green { background-color: rgba(219, 237, 219, 1); }
.select-value-color-gray { background-color: rgba(227, 226, 224, 1); }
.select-value-color-translucentGray { background-color: rgba(255, 255, 255, 0.0375); }
.select-value-color-orange { background-color: rgba(250, 222, 201, 1); }
.select-value-color-brown { background-color: rgba(238, 224, 218, 1); }
.select-value-color-red { background-color: rgba(255, 226, 221, 1); }
.select-value-color-yellow { background-color: rgba(253, 236, 200, 1); }
.select-value-color-blue { background-color: rgba(211, 229, 239, 1); }

.checkbox {
    display: inline-flex;
    vertical-align: text-bottom;
    width: 16;
    height: 16;
    background-size: 16px;
    margin-left: 2px;
    margin-right: 5px;
}

.checkbox-on {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%2358A9D7%22%2F%3E%0A%3Cpath%20d%3D%22M6.71429%2012.2852L14%204.9995L12.7143%203.71436L6.71429%209.71378L3.28571%206.2831L2%207.57092L6.71429%2012.2852Z%22%20fill%3D%22white%22%2F%3E%0A%3C%2Fsvg%3E");
}

.checkbox-off {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20x%3D%220.75%22%20y%3D%220.75%22%20width%3D%2214.5%22%20height%3D%2214.5%22%20fill%3D%22white%22%20stroke%3D%22%2336352F%22%20stroke-width%3D%221.5%22%2F%3E%0A%3C%2Fsvg%3E");
}
    
</style></head><body><article id="aca367b5-24e3-4984-82fb-57812853ce27" class="page sans"><header><img class="page-cover-image" src="Blog%20Post%20aca367b524e3498482fb57812853ce27/lindsay-moe-526857-unsplash.jpg" style="object-position:center 50%"/><div class="page-header-icon page-header-icon-with-cover"><span class="icon">✏️</span></div><h1 class="page-title">Blog Post</h1><p class="page-description"></p></header><div class="page-body"><div id="8616b5d8-669d-4bfe-b7a6-5dbb9a303c7f" class="column-list"><div id="ec7b066f-be72-48ac-9736-43281799eb8e" style="width:75%" class="column"><figure id="fc6c7871-2d2a-45bb-b91b-2fcf562797d2"><div class="block-color-gray source"><a href="Blog%20Post%20aca367b524e3498482fb57812853ce27/blank.pdf">https://s3-us-west-2.amazonaws.com/secure.notion-static.com/051a97fb-eaa4-4a5b-92ae-8c9d316c6731/blank.pdf</a></div></figure></div><div id="7d759ab6-5a4a-4d02-acbe-d8d31a86b0e9" style="width:25.000000000000007%" class="column"><figure id="06b76536-b5d2-4e48-b210-69b5babc8ce2"><div class="block-color-gray source"><a href="Blog%20Post%20aca367b524e3498482fb57812853ce27/blank.pdf">https://s3-us-west-2.amazonaws.com/secure.notion-static.com/051a97fb-eaa4-4a5b-92ae-8c9d316c6731/blank.pdf</a></div></figure></div></div><div id="930e7c82-5cac-48ae-afef-306feab6f35f" class="column-list"><div id="ac8bf0f1-0e3c-47c1-829d-d1f51d64fdd8" style="width:50%" class="column"><p id="43952bad-b2ba-479b-a84c-0dba0b5d85af" class="block-color-gray">FEBRUARY 15, 2018</p></div><div id="baa6f293-f787-4817-9e53-3aa93fe0c199" style="width:49.999999999999986%" class="column"><p id="e467249d-f653-4f60-9615-b234f4bc85f8" class="block-color-gray"><a href="https://blogs.getty.edu/iris/author/shwetasaraswat/">SHWETA SARASWAT</a>  AND <a href="https://blogs.getty.edu/iris/author/lhubber/">LAURA HUBBER</a></p></div></div><p id="93e70b1c-7cca-458a-b3b6-0092a80e7b42" class="block-color-gray">An imaginary conversation with Ray Garcia, Jonathan Gold, Evan Kleiman, Bricia Lopez, and Carlos Salgado about the evolving role of Mexican cuisine in LA as culture, art, and craft.</p><div id="a29ecb7f-f87b-46c0-b2bc-190763fb5a6a" class="column-list"><div id="92bd9dcf-dafd-44e8-a00e-060840ec8354" style="width:50%" class="column"><p id="cc3cc8eb-d596-4d14-bc9e-012e6aceef1f" class=""><strong>SS: As a </strong><a href="http://example.com"><strong>chef (or critic)</strong></a><strong>, do you consider yourself an artist?</strong></p><p id="4fe87bc0-55a0-4cbd-9c8b-ab941b1427ba" class=""><strong>EK:</strong> Art to me often has an intellectual component. I think of food preparation as a craft–I don’t think of it as art.</p><p id="f0260b6f-2dff-49fc-84ea-295eccf0d0d8" class=""><strong>RG:</strong> My personal approach to food is more of a craftsman. I like having my tools in hand, sort of creating and building, and my approach is much more trial and error. It’s part social scientist, and part repair person or builder.
It’s all about making memorable experiences.</p></div><div id="89dc6e09-bc00-4bea-bc67-2409104f1906" style="width:50%" class="column"><figure id="fff5ca5c-f2da-47aa-b348-c7ae9ecbe89b" class="image"><a href="Blog%20Post%20aca367b524e3498482fb57812853ce27/maarten-van-den-heuvel-400626-unsplash.jpg"><img style="width:4032px" src="Blog%20Post%20aca367b524e3498482fb57812853ce27/maarten-van-den-heuvel-400626-unsplash.jpg"/></a></figure><p id="9008bb42-8c8d-4515-ac72-01724dc886e0" class="block-color-gray">In the Getty Center auditorium for the recent “There Will Be Food“ panel.</p></div></div><p id="dec04c53-5138-4123-b13a-87eb53c67bf6" class=""><strong>JG:</strong> I’m a writer. Some people can call writers artists, some people cannot. In terms of food, there are people who approach cuisine from an art angle. Is it art as opposed to food? No, it’s food, but it’s being approached in a different way.</p><div id="e91f4ec3-b4ab-495b-9e3c-34354fa7a8a5" class="column-list"><div id="2cce5b42-3020-431f-a2ad-ea4061aa970c" style="width:50%" class="column"><figure id="bea95b38-780d-490d-b289-8632b539ac8d" class="image"><a href="Blog%20Post%20aca367b524e3498482fb57812853ce27/edgar-castrejon-459814-unsplash.jpg"><img style="width:3630px" src="Blog%20Post%20aca367b524e3498482fb57812853ce27/edgar-castrejon-459814-unsplash.jpg"/></a></figure><p id="631b035c-15e6-4ee3-af44-0858c670a8b6" class="block-color-gray">Tamale with pepitas at Taco María in Costa Mesa</p></div><div id="25a08246-b34e-40ab-9178-e31f24f41626" style="width:50%" class="column"><p id="d7c9ef5b-f2d3-4ed5-be0c-b1dd00bf3fe4" class=""><strong>SS: This panel represents Mexican American cuisine in LA. What other kinds of Latin American cuisine or particular dishes from other regions do you like?</strong></p><p id="711290cb-81cf-442f-8b37-0d4127f3234f" class=""><strong>JG:</strong> El Salvadoreño cooking. It’s very basic, but the ways they use corn and greens and cheese. The fermentations are lovely.</p><p id="51d29e84-c728-4a53-a9fc-e66bb7601469" class=""><strong>EK:</strong> I love Guatemalan tamales, maybe more than Mexican tamales. The masa is often mixed with potato, so it’s much more tender. They’re wrapped in banana leaves, so there’s a different flavor. And the way they are filled is different; often there’s olives or raisins or prunes in them.</p></div></div><p id="99ca6c60-6577-47a9-aa13-d457f66aa051" class=""><strong>BL:</strong> I love Peruvian food. Everything from the ceviche to rice and beans, all of the flavors. It has so much depth.</p><p id="e92652b9-b749-48f3-86ee-d78965f47a9a" class=""><strong>CS:</strong> Baja coastal cuisine. The freshness of it–you eat seafood in the morning because it just came in. Very simply prepared, very intense, briny ocean flavors: big clams, oysters, shrimp. Big, big flavors.</p><div id="cea87a64-602e-4049-b2f3-97cd43de5797" class="column-list"><div id="7edd0aba-5e7c-4c75-bd01-7dc4cf99d393" style="width:50%" class="column"><p id="8f9f129e-e4dc-4f78-9498-bd447dc01047" class=""><strong>SS: If you could recommend one dish or element in Mexican-American cuisine that a total beginner must try, what would it be?</strong></p><p id="225c38b8-f63d-4eed-9dd6-0fabe22f42bf" class=""><strong>EK:</strong> Tacos, because anything you eat with your hands is less intimidating than something that requires silverware. It takes you back to the permission of childhood, and that joy of just eating that is super direct. There is nothing in between you and the food.</p><p id="20b13f28-d9f6-4035-b287-45cffc40b50f" class=""><strong>BL:</strong> I think mole is a really good one. A lot of people think of it as a chocolate sauce, and yes, it has chocolate, but it also has like 18 other things. I always recommend three things: mole, the barbacoa, and the chiles rellenos at my restaurant, just because I think they are universally delicious.</p></div><div id="3793ef64-cd34-4491-8d20-a68c983caf19" style="width:50%" class="column"><figure id="03380350-46b6-42f4-bd80-f3fa9040ea4c" class="image"><a href="Blog%20Post%20aca367b524e3498482fb57812853ce27/christine-siracusa-363257-unsplash.jpg"><img style="width:4153px" src="Blog%20Post%20aca367b524e3498482fb57812853ce27/christine-siracusa-363257-unsplash.jpg"/></a></figure><p id="96cdafb3-62f2-422d-a792-106b6c21e605" class="block-color-gray">Dishes at Broken Spanish, in Downtown LA.</p></div></div><p id="aa15d31f-1597-413f-9036-39c4618153eb" class=""><strong>CS:</strong> I would say try more and different types of chilies, and the salsas that result from them. The range of flavors, and balance of flavors, is really exciting, and is my favorite part of Mexican food.</p><p id="eeaab8a6-e571-4cc4-b87a-add4baa58aad" class=""><strong>RG:</strong> Put aside your thoughts and limitations on what Mexican food can be, and how much it can cost. Especially in LA, there is almost a cult-like following for cheap Mexican food, for the greasy taco truck. There is something people find exciting about that, but I think it’s good to stop and wonder why your taco costs a dollar. There must be a lot behind it that allows you to eat a dollar taco. It probably doesn’t include a living wage, a safe work environment, or the best quality ingredients for you and your body. We could understand where our food is coming from and be a bit more conscious in our choices.</p><p id="b3523ff7-bbdc-486c-8552-95ef18ce2cca" class="">
</p></div></article></body></html>

i can't unminify html without breaking the user interface

Solution 
  • body {
    line-height: 1.5;
    /* white-space: pre-wrap; <-- this line is what's causing the issue */
}

    Thanks @Liftoff for your solution