如何在Markdown中应用颜色?


373

我想使用Markdown存储文本信息。但是快速浏览表明Markdown不支持颜色。另外,StackOverflow不支持颜色。与GitHub markdown相同。

是否有允许彩色文本的降价促销?


1
您的输出格式是什么?Markdown通常用于转换为支持颜色的html,许多解析器接受html代码
scoa 2016年

您是说这些解析器具有将markdown的html放在“ <span style =“ color:red”> </ style>”之内的内置功能吗?我没听见 任何链接/示例吗?
Mahesha999 '16

5
我的意思是你可以将它们与pandoc混合使用:<span style="color:red"> *some emphasized markdown text*</span>。如果您要询问色彩的本机降价处理,我认为它不存在
scoa,2013年

1
这个答案可能对我有帮助...
好奇

Answers:


373

简短答案

Markdown不支持颜色!

TL; DR

如原始/官方语法规则所述(加了强调):

Markdown的语法仅用于一个目的:用作Web编写的格式。

Markdown不能替代HTML,甚至不能替代HTML。它的语法非常小,仅对应于很小的HTML标签子集。这个想法不是要创建一种使插入HTML标签更加容易的语法。我认为HTML标记已经很容易插入。Markdown的想法是使散文易于阅读,编写和编辑。HTML是一种发布格式;Markdown是一种书写格式。因此,Markdown的格式语法仅解决了可以以纯文本形式传达的问题

对于Markdown语法未涵盖的任何标记,您只需使用HTML本身。

由于它不是一种“发布格式”,因此Markdown无法提供一种为文本着色的方法。也就是说,您可以包括原始HTML(并且HTML是一种发布格式),这并非没有可能。例如,以下Markdown文本(由@scoa在评论中建议):

Some Markdown text with <span style="color:blue">some *blue* text</span>.

将产生以下HTML:

<p>Some Markdown text with <span style="color:blue">some <em>blue</em> text</span>.</p>

现在,StackOverflow(可能还有GitHub)将去除原始HTML(作为安全措施),因此您在这里失去了色彩,但是它可以在任何标准Markdown实现中使用。

另一种可能性是使用最初由Markdown 的Markuru实现引入的,后来被其他一些 采用的非标准属性列表(同一思想的实现可能有更多或稍微不同,例如pandoc中的div和span属性)。在这种情况下,您可以将一个类分配给一个段落或内联元素,然后使用CSS定义一个类的颜色。但是,您绝对必须使用实际上支持非标准功能的少数实现之一,并且您的文档不再可移植到其他系统。


2
谢谢,现在还需要试验如何将HTML和markdown混合在一起。但是我真的觉得,任何写作形式都应该允许作家传达他想强调的单词。尽管可以为此使用粗体和斜体,但是为了解释过于复杂的主题,可以通过用颜色强调。或者简单地通过用相同的颜色给属于同一对的单词(比如说在同一句子中,但彼此相距有点远)上色来传达其他单词之间成对的两个单词。要点是可以证明有用的功能,取决于要编写的文本的性质和复杂性。
Mahesha999 '16

似乎以纯文本表达的能力是降价的首要条件。这就是为什么这一切
Mahesha999,2016年

10
在我看来,您对Markdown的期望不同于其创建者的期望。但这只是我的意见……
Waylan '16

“ Markdown的语法仅用于一个目的:用作Web编写的格式。” 有时,我们想用彩色书写。这是我们的权利。警告:危险!红色更好。您如何解释它们实现了语言的语法着色?当我们需要时,颜色供我们使用。
Marc Le Bihan

从markdown转换为pdf时,您如何使<p> <style =“” color:...“>工作?那就不行了。颜色的标准降价解决方案会更好。
Marc Le Bihan

56

我已经开始使用Markdown将一些文档发布到内部网站供内部用户使用。这是共享文档但查看者无法编辑的简单方法。

因此,此彩色文本标记为“很好”。我已经使用了几种类似的方法,效果很好。

<span style="color:blue">some *This is Blue italic.* text</span>

变成“ 这是蓝色斜体”。

<span style="color:red">some **This is Red Bold.** text</span>

变成“ 这是红色粗体”。

我喜欢它的灵活性和易用性。


7
我想这应该是评论-它并不能真正回答OP的问题。
Marcus Mangelsdorf

15
除了“ This is Red Bold”中
mplungjan '18

1
并不是说上述内容可能会在网页上起作用,而是...乐趣▼✡︎✶✸∍∀≤☂︎☯︎℥😇🥑🇬🇧–
Robotbugs

4
您似乎在这里将Markdown与HTML标记混合在一起。在Web浏览器中查看时,span元素可能会添加颜色,但不是Markdown
马丁·格雷

1
大多数试图在页面上获得颜色的人只是将注意力集中在颜色是否会呈现给降价文档上。如果代码本身是降价促销,则不会。因此,我认为这是一个很好的答案。
Maiya

21

虽然Markdown不支持颜色,但是如果您不需要太多,您总是可以牺牲一些受支持的样式,并使用CSS重新定义相关标签以使其变为彩色,并且也可以删除格式。

例:

// resets
s { text-decoration:none; } //strike-through
em { font-style: normal; font-weight: bold; } //italic emphasis


// colors
s { color: green }
em { color: blue }

另请参阅:如何将em标签重新设置为粗体而不是斜体

然后在您的降价文字中

~~This is green~~
_this is blue_

有趣的是,但在给文本上色时要消除罢工,下面的方法应该可以更好地工作:s {text-decoration:none; color: green}
x0s

2
海事组织,这个答案最符合降价精神,同时回答了主要问题。它尊重markdown的纯文本思想(在纯文本中可读),并且满足markdown查看器解析文本时的转换要求。从这个意义上说,我希望有一定的空间(wrt markdown查看器可以将markdown标签重新定义为其他HTML标签或自动为它们分配类)。例如,我希望*_有所不同,但它们都指向<em>
Melvin Roest

13

这应该更短:

<font color='red'>test blue color font</font>

在PDF中转换时不起作用
Marc Le Bihan

我不喜欢使用不推荐使用的HTML标签的想法,但是,如果它有用,它就可以工作...
Alonso del Arte

7

您可能可以使用乳胶样式:

$\color{color-code}{your-text-here}$

为了保持单词之间的空格,还需要包含tilde ~


2
这是唯一对我有用的解决方案。
EBE艾萨克

在{your-text-here}区域中,必须使用代字号~代替空格来插入空格。
Alex

@Alex:或执行$ \ color {颜色代码} {{\在此处输入文字}} $。
Peter K.

或执行$ \ color {颜色代码} {\ text {您在此处输入的文字}} $。
6

4

似乎kramdown支持某种形式的颜色。

Kramdown 允许内联html

This is <span style="color: red">written in red</span>.

另外,它还有另一种语法可以内联包含CSS类

This is *red*{: style="color: red"}.

页面进一步解释GitLab如何利用在Kramdown应用CSS类更紧凑的方式:

blue课程应用于文本:

This is a paragraph that for some reason we want blue.
{: .blue}

blue类别应用于标题:

#### A blue heading
{: .blue}

应用两个类:

A blue and bold paragraph.
{: .blue .bold}

应用ID:

#### A blue heading
{: .blue #blue-h}

这将产生:

<h4 class="blue" id="blue-h">A blue heading</h4>

上面的链接中还介绍了许多其他内容。您可能需要检查。

另外,正如其他答案所说,Kramdown也是Jekyll背后默认markdown渲染器。因此,如果您要在github页面上创作任何内容,则上述功能可能是开箱即用的。


3

在其中,Jekyll我能够为粗体元素添加一些颜色或其他样式(也应与所有其他元素一起使用)。

我以“样式”开始{:并结束它}。元素和大括号之间不允许有空格!

**My Bold Text, in red color.**{: style="color: red; opacity: 0.80;" }

将翻译为html:

<strong style="color: red; opacity: 0.80;">My Bold Text, in red color.</strong>


2

当你想使用纯降价(没有嵌套的HTML),则可以使用表情符号,提请注意该文件的某些片段,即⚠️ 警告 ⚠️,🔴 重要 ❗🔴或🔥 🔥。


0

我已经成功

<span class="someclass"></span>

注意:该类必须已经存在于站点上。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.