我刚开始接触Markdown。我喜欢它,但有一件事困扰着我:如何使用Markdown更改图像的大小?

文档仅为图像提供以下建议:

![drawing](drawing.jpg)

如果可能的话,我希望图片也居中。我问的是Markdown将军,而不仅仅是GitHub是如何做到的。


当前回答

如果您正在为PanDoc编写MarkDown,可以执行以下操作:

![drawing](drawing.jpg){ width=50% }

这会将style=“width:50%;”添加到HTML<img>标记中,或将[width=0.5\textwidth]添加到LaTeX中的\includegraphics中。

资料来源:http://pandoc.org/MANUAL.html#extension-链接属性

其他回答

如果您正在使用kramdown,可以执行以下操作:

{:.foo}
![drawing](drawing.jpg)

然后将其添加到自定义CSS中:

.foo {
  text-align: center;
  width: 100px;
}

这里公认的答案是,我迄今为止使用的应用程序(如Ghost、Stackdit.io或StackOverflow编辑器)中没有任何Markdown编辑器可用。我在StackEdit.io问题跟踪程序中找到了一个解决方法。

解决方案是直接使用HTML语法,它工作得很好:

<img src="http://....jpg" width="200" height="200" />

纯粹的<img。。。width=“50%”>如上所述,在我的Github Readme.md文档上做了工作。

然而,我真正的问题是,图像位于表单元格中,只是压缩旁边单元格中的文本。因此,另一种方法是在Markdown表中设置列宽,但这些解决方案对于我的上午来说似乎还不够醒目。

最后,我通过简单地在旁边的文本单元格中添加所需的“”来解决这两个问题。

我希望这有帮助。再见,谢谢大家。

通过纯向后兼容MD:

![<alt>](<imguri>#<w>x<h> "<title>")

其中w,h定义了要纵横适配的边界框,例如在Flutter包中https://pub.dev/packages/flutter_markdown

代码:https://github.com/flutter/packages/blob/9e8f5227ac14026c419f481ed1dfcb7b53961475/packages/flutter_markdown/lib/src/builder.dart#L473

重新考虑破坏兼容性的html解决方案,因为人们可能会使用本机/非html组件/应用程序来显示标记。

当使用Flask时(我将其用于平面页面)。。。我发现,在markdown调用中的扩展中显式地启用(由于某种原因,默认情况下不是这样)“attr_list”可以实现这一点,然后可以使用属性(对于访问CSS也非常有用-例如,class=“my class”…)。

FLATPAGES_HML_RENDERER=prerender_jinja

以及功能:

def prerender_jinja(text):
    prerendered_body = render_template_string(Markup(text))
    pygmented_body   = markdown.markdown(prerendered_body, extensions=['codehilite', 'fenced_code', 'tables', 'attr_list'])
    return pygmented_body

然后在Markdown中:

![image](https://octodex.github.com/images/yaktocat.png "This is a tooltip"){: width=200px}