我正在做一个网站,每月发表文章的问题。这很简单,我认为使用Markdown编辑器(如Stack Overflow中的WMD)将是完美的。
然而,他们确实需要在给定的段落中使图像右对齐的能力。
我看不出在目前的体制下有什么办法能做到这一点——有可能吗?
我正在做一个网站,每月发表文章的问题。这很简单,我认为使用Markdown编辑器(如Stack Overflow中的WMD)将是完美的。
然而,他们确实需要在给定的段落中使图像右对齐的能力。
我看不出在目前的体制下有什么办法能做到这一点——有可能吗?
当前回答
我发现了一个很好的解决方案在纯Markdown与一个小css3 hack:-)
![image alt >](/image-right.jpg)
![image alt <](/image-left.jpg)
![image alt ><](/center-image.jpg)
当图像alt以<或>结束时,遵循css3代码浮动图像在左侧或右侧。
img[alt$=">"] {
float: right;
}
img[alt$="<"] {
float: left;
}
img[alt$="><"] {
display: block;
max-width: 100%;
height: auto;
margin: auto;
float: none!important;
}
其他回答
你可以在Markdown中嵌入HTML,所以你可以这样做:
<img style="float: right;" src="whatever.jpg">
Continue markdown text...
我有一个替代方法上面使用ALT标签和CSS选择器在ALT标签…相反,添加这样的URL散列:
首先你的Markdown图像代码:
![my image](/img/myImage.jpg#left)
![my image](/img/myImage.jpg#right)
![my image](/img/myImage.jpg#center)
注意添加的URL哈希#中心。
现在在CSS中添加这个规则,使用css3属性选择器来选择具有特定路径的图像。
img[src*='#left'] {
float: left;
}
img[src*='#right'] {
float: right;
}
img[src*='#center'] {
display: block;
margin: auto;
}
您应该能够像定义类名一样使用URL散列,而不是像某些人评论的解决方案那样滥用ALT标记。它也不需要任何额外的扩展。为左右浮动也做一个,或者任何你想要的样式。
如果你用Python实现它,有一个扩展可以让你添加HTML键/值对,以及类/id标签。它的语法是:
![A picture of a cat](cat.png){: style="float:right"}
或者,如果嵌入式样式不能让你的船浮起来,
![A picture of a cat](cat.png){: .floatright}
使用相应的样式表styles .css:
.floatright {
float: right;
/* etc. */
}
我喜欢learnvst使用表格的答案,因为它是相当可读的(这是编写Markdown的一个目的)。
然而,在GitBook的Markdown解析器的情况下,除了一个空标题行,我还必须在它下面添加一个分隔行,以使表能够被识别并正确呈现:
| - | - |
|---|---|
| I am text to the left | ![Flowers](/flowers.jpeg) |
| ![Flowers](/flowers.jpeg) | I am text to the right |
分隔线至少需要包含三个破折号——。
许多Markdown“额外”处理器支持属性。所以你可以像这样包含一个类名(PHP Markdown Extra):
![Flowers](/flowers.jpeg){.callout}
或者,备用的(我的,Kramdown, Python Markdown):
![Flowers](/flowers.jpeg){: .callout}
然后,当然,您可以以正确的方式使用样式表:
.callout {
float: right;
}
如果您的文档支持这种语法,那么它将为您提供两全其美的服务:没有嵌入标记,样式表足够抽象,无需内容编辑器修改。