如何使用Markdown设置图片样式

原文链接: https://www.xaprb.com/blog/how-to-style-images-with-markdown/

Markdown是一种方便的、以html为中心的简写语法，用于格式化文档和博客文章等内容，但它缺乏图像格式化(如对齐和大小调整)的基本功能。这篇文章介绍了多种使用Markdown来格式化图像的方法，从蛮力到专有语法扩展、不明智的修改，以及介于两者之间的各种方法。

这是你如何插入一个图像在Markdown:

1	![alt text](/src/of/image.jpg "title")

也就是说，Markdown允许您在HTML中使用src、alt和title属性指定img标记。标准的Markdown并没有提供更多的功能，但是网站通常需要宽度、高度和CSS类属性。

本文的其余部分致力于解决这些缺点的各种方法。为了激发这个讨论，我将使用一个应该以较小尺寸显示的大图像示例。

例如,

1	![Kitten](/media/2018/08/kitten.jpg "A cute kitten")

我不会向您展示如何添加对齐、浮动或浮动—但是我的大小调整示例就足够了，因为一旦您知道如何更改图像的大小，您就会知道如何做其他事情。我将首先向您展示最好的解决方案，最后介绍不需要的解决方案。

使用标准的HTML

Markdown最初是为HTML创作而设计的，它允许在任何地方、任何时间使用原始HTML。因此，最直接的解决方案是简单地使用HTML与所需的属性:

1 2	<img src="/media/2018/08/kitten.jpg" alt="Kitten" title="A cute kitten" width="150" height="100" />

这样做是有效的，并且为您提供了对结果HTML的无限制控制。但是Markdown因其简单而吸引人，不像HTML那样充斥着杂乱的标记。因此，许多人不喜欢这个解决方案，因为它违背了Markdown的目的。

使用CSS和特殊的URL参数

通常，对图像进行样式化的最好方法是使用CSS。现代CSS语法可以根据元素的属性值来选择元素，所以应用CSS规则的一种方法是将额外的信息编码到Markdown的标准src属性中。在本节中，我将讨论这些可能性。稍后，我还将向您展示一些不需要的与css相关的技术。

URL中有两个地方可以重载以携带CSS可以使用的信息:URL片段和URL查询参数。

URL片段是在#字符之后的部分。当它在网站的URL中使用时，它可以滚动页面，将所需的部分内容显示到视图中，但是您也可以将其添加到图像中。当您这样做时，它实际上对浏览器来说什么也不做，而且一般用户也不会在浏览器的地址栏中看到它。但它对我们的造型需求很有用。在这里，我们将添加一个缩略图片段到图像的源URL:

1	![Kitten](/media/2018/08/kitten.jpg#thumbnail)

此信息完全保存在客户端，浏览器在请求内容时不会将这部分URL传输到服务器。但是，CSS和JavaScript可以读取片段并使用它。下面是如何编写一个CSS选择器，将匹配的图像与这个“缩略图”信息在URL:

img[src*="#thumbnail"] {
   width:150px;
   height:100px;
}

img[src*=”#thumbnail”] {
width:150px;
height:100px;
}

如果#thumbnail出现在src属性中的任何位置，则*=选择器语法匹配。您还可以使用$=”#thumbnail”将匹配锚定到URL的结尾。

这只允许将单个值编码到URL中，但是您可以修改此技术以添加多个值。CSS还有一个~=选择器，如果指定的值恰好以空格分隔的“word”形式出现在属性值中，它就会匹配。这让你模拟组合多个“类”在URL片段:

1	![Kitten](/media/2018/08/kitten.jpg# thumbnail bordered)

现在你可以针对这些伪“类”名称从CSS:

img[src~="thumbnail"] {
   width:150px;
   height:100px;
}
img[src~="bordered"] {
   border: 1px solid black;
}

![Kitten](https://www.xaprb.com/media/2018/08/kitten.jpg# thumbnail bordered)
img[src=”thumbnail”] {
width:150px;
height:100px;
}
img[src=”bordered”] {
border: 1px solid black;
}

将空格编码为URL的等效方法是使用%20 URL编码，但是我发现这在我在这里展示的Blackfriday Markdown处理器中不起作用1:

当然，您可以选择不同的方法来构造值，例如使用key=value语法或任何适合您目的的方法。根据您的喜好，可以使用任何适合您的CSS选择器语法。

另一种方法是使用普通的URL查询参数，即问号后面的部分: