Question

因此，我正在尝试在面板内放置降价文字和图像。我正在将flask blogging extension集成到我的网站中。问题在于，这会一次渲染包含图像链接和段落的文本，因此我无法单独选择图像来调整它们的大小。我可以用所有文本和图像正确放入内部的方式来对div块进行样式设置吗？这就是我渲染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>

Answer 1

要自动将markdown放入div中，您需要使用Attribute lists extention中的python-markdown。

这是一个小例子：

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')

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}

以相同的方式插入 id 或其他键：

![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

自动将div内的markdown图片拟合

1 个答案: