How to display HTML content?

[LuFei]

Clear and concise description of the problem

my html content

<p>最近在做一个产品列表页面，布局如右图所示。页面中有若干个 item，其中每个 item 都向左浮动，并包含在自适应浏览器窗口宽度的父元素中。</p> <p><img class="loading" data-src="https://s2.loli.net/2024/03/15/y5JDAMLEYIkTgRS.png" alt="image.png"> <p>item 元素的 CSS 定义如下：</p> <pre><code class="lang-css">.item { float: left; margin: 10px 2%; width: 21%; } </code></pre> <p>这时遇到的一个需求：<strong>在保持 item 元素宽高比恒定（如高是宽的 1.618 倍）的情况下，使得 item 元素可以和父元素同比缩放。 </strong>我们知道，如果当 item 元素是图片，同时需要保持的宽高比恰好为图片本身的宽高比时，可以设置 item 的 height 为 auto 即可轻松实现这个需求。然而当 item 元素不是图片或者要保持的宽高比和图片本身的宽高比不同时，这个需求显得很难直接用 CSS 实现。</p> <p>为此我放弃 CSS，直接用 JavaScript 绑定 <code>window</code> 的 <code>onresize</code> 事件来动态获取每个 item 的宽度，从而计算并设置其高度。</p> <p>我一直在使用这个解决方案，直到今天调整样式时，突然想到这个需求竟然是可以只使用 CSS 解决的。</p>

code:

  <Shiki class="markdown-body custom-markdown line-numbers" v-lazy-container="{ selector: 'img' }"
                    @click="imageEnlargement" :code="code" />

import { codeToHtml } from 'shiki'

const code = await codeToHtml(props.markdownContent, {
    lang: 'javascript',
    themes: {
        light: 'min-light',
        dark: 'nord',
    }
})

I hope

Suggested solution

No

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Contributes

• If this feature request is accepted, I am willing to submit a PR to fix this issue

[Anthony Fu]

Issues are not "free help" - please show some respect at least.

[LuFei]

Issues are not "free help" - please show some respect at least.

哈哈哈 大佬，我是机翻的英文[捂脸]。请问一下 html如何用呀？

[LuFei]

Issues are not "free help" - please show some respect at least.

可以像 highlight.js 那样使用吗？求回复~~

[LuFei]

I am the English language. How to use HTML? Can I use it like highlight.js? Please reply ~