gpt4 book ai didi

html - 在 div 中自动拟合 Markdown 图像

转载 作者:行者123 更新时间:2023-11-27 23:59:02 29 4
gpt4 key购买 nike

所以我试图在面板内放置 Markdown 文本+图像。我正在整合 flask blogging extension进入我的网站。问题是这会同时呈现包含图像链接和段落的文本,因此我无法单独选择图像来调整它们的大小。我是否有可能以所有文本和图像都适合内部的方式设置 div block 的样式。这就是我渲染 atm 的方式,

<p style="width: 100%">{{ post.rendered_text | safe }}</p>     

它适合文本,但图像有时会超出 div。如果有人能指出正确的方向,我将不胜感激。

面板代码,

<div class="panel panel-default" style="margin-top: 60px; "> <!-- Blog Post -->
<div class="panel-heading">
<h3 class="panel-title">{{ post.title }}</h3>
</div>
<div class="panel-body" style="width: 100%">
<p style="width: 100%">{{ post.rendered_text | safe }}</p>
</div>

<div class="panel-footer">Posted by Name on Date</div>

</div>

最佳答案

要在 div 中自动适应 Markdown ,您需要使用 Attribute lists extention来自 python-markdown .

这是一个小例子:

  1. main.py
# We import the markdown library
import markdown
from flask import Flask
from flask import render_template
from flask import Markup

app = Flask(__name__)
@app.route('/')

def index():
content = """
Chapter
=======

![image](https://defenders.org/sites/default/files/styles/large/public/dolphin-kristian-sekulic-isp.jpg){: .rounded-corner}

Section
-------

* Item 1
* Item 2
"""
content = Markup(markdown.markdown(content, extensions=['markdown.extensions.attr_list']))
return render_template('index.html', **locals())


if __name__ == '__main__':
app.run(host='0.0.0.0', port='3000')
  1. templates/index.html
<html>
<head>
<style>
.rounded-corner {
border-radius: 50%;
}
</style>
<title>Markdown Snippet</title>
</head>
<body>
{{ content }}
</body>
</html>

你需要在每个用markdown插入的图片后插入类名,例如rounded-corner:

![image](https://defenders.org/sites/default/files/styles/large/public/dolphin-kristian-sekulic-isp.jpg){: .rounded-corner}

与插入ids其他键 的方式相同:

![image](https://defenders.org/sites/default/files/styles/large/public/dolphin-kristian-sekulic-isp.jpg){: #someid alt='dolphin'}

当您将 markdown 转换为 html 时,您需要调用所需的扩展:

  content = Markup(markdown.markdown(content, extensions=['markdown.extensions.attr_list']))

要在 div 中添加图像,您需要使用 python-markdown extra

关于html - 在 div 中自动拟合 Markdown 图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56098538/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com