时间戳

首页 > 解决方案 > 在 div 中自动拟合 markdown 图像

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

问题描述

所以我试图在面板内放置降价文本+图像。我正在将烧瓶博客扩展集成到我的网站中。问题是这会立即呈现包含图像链接和段落的文本，因此我无法单独选择图像来调整它们的大小。我是否可以对 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>

标签： htmlcssflaskflask-bootstrap

解决方案

要在 div 中自动适应 markdown，您需要使用来自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}

您可以使用相同的方式插入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

推荐阅读