Markdown编辑器语法之代码高亮、标记和文字颜色

Markdown 通过简单标记语法,使普通文本内容具有一定格式。但它本身不支持修改字体、字号与颜色等功能的。CSDN-markdown 编辑器是其衍生版本,支持基于 PageDown ( Stack Overflow)所使用的编辑器的扩展功能(如表格、脚注、内嵌HTML、内嵌 LaTeX 等等)。

代码语法高亮

书写格式为:

language_key if (condition) { return true }

在 ```(三个反引号)之间的是代码,其中language_key的值,请参考下面的表格

例如,将language_key用javascript替换,效果如下:

if (condition){
return true
}
1
2
3
支持的语言和缩写标记
注:javascript代码的语法高亮,可以写成js,但不确定是否所有markdown编辑器都支持。

languagelanguage_key
Apacheapache
AppleScriptapplescript
AsciiDocasciidoc
Bashbash
BrainFuckbrainfuck
CMakecmake
CoffeeScriptcoffeescript
C++cpp
C#c s
CSScss
Delphidelphi
Diffdiff
Djangodjango
ERB (Embedded Ruby)erb
Erlang REPLerlang-repl
Erlangerlang
FIXfix
F#fsharp
G-code (ISO 6983)gcode
GLSLglsl
Gogo
Gradlegradle
Groovygroovy
Handlebarshandlebars
Haskellhaskell
Haxehaxe
HTTPhttp
Ini fileini
Javajava
JavaScriptjavascript
JSONjson
Lisplisp
LiveCodelivecodeserver
LiveScriptlivescript
Lualua
Makefilemakefile
Markdownmarkdown
Mathematicamathematica
Matlabmatlab
MEL (Maya Embedded Language)mel
Mercurymercury
Monkeymonkey
nginxnginx
Nixnix
Objective Cobjectivec
OCamlocaml
Oxygeneoxygene
Parser 3parser3
Perlperl
PHPphp
PowerShellpowershell
Processingprocessing
Python’s profiler outputprofile
Protocol Buffersprotobuf
Puppetpuppet
Pythonpython
Qq
Rr
RenderMan RSLrsl
Rubyruby
Oracle Rules Languageruleslanguage
Rustrust
Scalascala
Schemescheme
Scilabscilab
SCSSscss
SmallTalksmalltalk
SMLsml
SQLsql
Statastata
Swiftswift
Tcltcl
TeXtex
Thriftthrift
TypeScripttypescript
VB.NETvbnet
VBScript in HTMLvbscript-html
VBScriptvbscript
Verilogverilog
VHDLvhdl
Vim Scriptvim
Intel x86 Assemblyx86asm
XML, HTMLxml

##文字样式1(内嵌HTML)

Size:规定文本的尺寸大小,取值从 1 到 7 ,浏览器默认值是 3.
<font face="黑体">我是黑体字</font>
<font face="微软雅黑">我是微软雅黑</font>
<font face="STCAIYUN">我是华文彩云</font>
<font color=#0099ff size=3 face="黑体">color=#0099ff size=3 face="黑体"</font>
<font color=#00ffff size=4>color=#00ffff size=4</font>
<font color=gray size=5>color=gray size=5</font>

呈现效果:

我是黑体字
我是微软雅黑
我是华文彩云
color=#0099ff size=3 face=“黑体”
color=#00ffff size=4
color=gray size=5

文字底色

由于 style 标签和标签的 style 属性不被支持,所以这里只能是借助 table, tr, td 等表格标签的 bgcolor 属性来实现背景色。故这里对于文字背景色的设置,只是将那一整行看作一个表格,更改了那个格子的背景色(bgcolor)。
使用实例:

这里的背景色是:PowderBlue, 十六进制颜色值: #B0E0E6,rgb(176, 224, 230)
颜色列表
颜色名十六进制颜色值颜色
AliceBlue#F0F8FF
rgb(240, 248, 255)
AntiqueWhite#FAEBD7
rgb(250, 235, 215)
Aqua#00FFFF
rgb(0, 255, 255)
Aquamarine#7FFFD4
rgb(127, 255, 212)
Azure#F0FFFF
rgb(240, 255, 255)
Beige#F5F5DC
rgb(245, 245, 220)
Bisque#FFE4C4
rgb(255, 228, 196)
Black#000000
rgb(0, 0, 0)
BlanchedAlmon#FFEBCD
rgb(255, 235, 205)
Blue#0000FF
rgb(0, 0, 255)
BlueViolet#8A2BE2
rgb(138, 43, 226)
Brown#A52A2A
rgb(165, 42, 42)
BurlyWood#DEB887
rgb(222, 184, 135)
CadetBlue#5F9EA0
rgb(95, 158, 160)
Chartreuse#7FFF00
rgb(127, 255, 0)
Chocolate#D2691E
rgb(210, 105, 30)
Coral#FF7F50
rgb(255, 127, 80)
CornflowerBlue#6495ED
rgb(100, 149, 237)
Cornsilk#FFF8DC
rgb(255, 248, 220)
Crimson#DC143C
rgb(220, 20, 60)
Cyan#00FFFF
rgb(0, 255, 255)
DarkBlue#00008B
rgb(0, 0, 139)
DarkCyan#008B8B
rgb(0, 139, 139)
DarkGoldenRod#B8860B
rgb(184, 134, 11)
DarkGray#A9A9A9
rgb(169, 169, 169)
DarkGreen#006400
rgb(0, 100, 0)
DarkKhaki#BDB76B
rgb(189, 183, 107)
DarkMagenta#8B008B
rgb(139, 0, 139)
DarkOliveGreen#556B2F
rgb(85, 107, 47)
Darkorange#FF8C00
rgb(255, 140, 0)
DarkOrchid#9932CC
rgb(153, 50, 204)
DarkRed#8B0000
rgb(139, 0, 0)
DarkSalmon#E9967A
rgb(233, 150, 122)
DarkSeaGreen#8FBC8F
rgb(143, 188, 143)
DarkSlateBlue#483D8B
rgb(72, 61, 139)
DarkSlateGray#2F4F4F
rgb(47, 79, 79)
DarkTurquoise#00CED1
rgb(0, 206, 209)
DarkViolet#9400D3
rgb(148, 0, 211)
DeepPink#FF1493
rgb(255, 20, 147)
DeepSkyBlue#00BFFF
rgb(0, 191, 255)
DimGray#696969
rgb(105, 105, 105)
DodgerBlue#1E90FF
rgb(30, 144, 255)
Feldspar#D19275
rgb(209, 146, 117)
FireBrick#B22222
rgb(178, 34, 34)
FloralWhite#FFFAF0
rgb(255, 250, 240)
ForestGreen#228B22
rgb(34, 139, 34)
Fuchsia#FF00FF
rgb(255, 0, 255)
Gainsboro#DCDCDC
rgb(220, 220, 220)
GhostWhite#F8F8FF
rgb(248, 248, 255)
Gold#FFD700
rgb(255, 215, 0)
GoldenRod#DAA520
rgb(218, 165, 32)
Gray#808080
rgb(128, 128, 128)
Green#008000
rgb(0, 128, 0)
GreenYellow#ADFF2F
rgb(173, 255, 47)
HoneyDew#F0FFF0
rgb(240, 255, 240)
HotPink#FF69B4
rgb(255, 105, 180)
IndianRed#CD5C5C
rgb(205, 92, 92)
Indigo#4B0082
rgb(75, 0, 130)
Ivory#FFFFF0
rgb(255, 255, 240)
Khaki#F0E68C
rgb(240, 230, 140)
Lavender#E6E6FA
rgb(230, 230, 250)
LavenderBlush#FFF0F5
rgb(255, 240, 245)
LawnGreen#7CFC00
rgb(124, 252, 0)
LemonChiffon#FFFACD
rgb(255, 250, 205)
LightBlue#ADD8E6
rgb(173, 216, 230)
LightCoral#F08080
rgb(240, 128, 128)
LightCyan#E0FFFF
rgb(224, 255, 255)
LightGoldenRodYellow#FAFAD2
rgb(250, 250, 210)
LightGrey#D3D3D3
rgb(211, 211, 211)
LightGreen#90EE90
rgb(144, 238, 144)
LightPink#FFB6C1
rgb(255, 182, 193)
LightSalmon#FFA07A
rgb(255, 160, 122)
LightSeaGreen#20B2AA
rgb(32, 178, 170)
LightSkyBlue#87CEFA
rgb(135, 206, 250)
LightSlateBlue#8470FF
rgb(132, 112, 255)
LightSlateGray#778899
rgb(119, 136, 153)
LightSteelBlue#B0C4DE
rgb(176, 196, 222)
LightYellow#FFFFE0
rgb(255, 255, 224)
Lime#00FF00
rgb(0, 255, 0)
LimeGreen#32CD32
rgb(50, 205, 50)
Linen#FAF0E6
rgb(250, 240, 230)
Magenta#FF00FF
rgb(255, 0, 255)
Maroon#800000
rgb(128, 0, 0)
MediumAquaMarine#66CDAA
rgb(102, 205, 170)
MediumBlue#0000CD
rgb(0, 0, 205)
MediumOrchid#BA55D3
rgb(186, 85, 211)
MediumPurple#9370D8
rgb(147, 112, 216)
MediumSeaGreen#3CB371
rgb(60, 179, 113)
MediumSlateBlue#7B68EE
rgb(123, 104, 238)
MediumSpringGreen#00FA9A
rgb(0, 250, 154)
MediumTurquoise#48D1CC
rgb(72, 209, 204)
MediumVioletRed#C71585
rgb(199, 21, 133)
MidnightBlue#191970
rgb(25, 25, 112)
MintCream#F5FFFA
rgb(245, 255, 250)
MistyRose#FFE4E1
rgb(255, 228, 225)
Moccasin#FFE4B5
rgb(255, 228, 181)
NavajoWhite#FFDEAD
rgb(255, 222, 173)
Navy#000080
rgb(0, 0, 128)
OldLace#FDF5E6
rgb(253, 245, 230)
Olive#808000
rgb(128, 128, 0)
OliveDrab#6B8E23
rgb(107, 142, 35)
Orange#FFA500
rgb(255, 165, 0)
OrangeRed#FF4500
rgb(255, 69, 0)
Orchid#DA70D6
rgb(218, 112, 214)
PaleGoldenRod#EEE8AA
rgb(238, 232, 170)
PaleGreen#98FB98
rgb(152, 251, 152)
PaleTurquoise#AFEEEE
rgb(175, 238, 238)
PaleVioletRed#D87093
rgb(216, 112, 147)
PapayaWhip#FFEFD5
rgb(255, 239, 213)
PeachPuff#FFDAB9
rgb(255, 218, 185)
Peru#CD853F
rgb(205, 133, 63)
Pink#FFC0CB
rgb(255, 192, 203)
Plum#DDA0DD
rgb(221, 160, 221)
PowderBlue#B0E0E6
rgb(176, 224, 230)
Purple#800080
rgb(128, 0, 128)
Red#FF0000
rgb(255, 0, 0)
RosyBrown#BC8F8F
rgb(188, 143, 143)
RoyalBlue#4169E1
rgb(65, 105, 225)
SaddleBrown#8B4513
rgb(139, 69, 19)
Salmon#FA8072
rgb(250, 128, 114)
SandyBrown#F4A460
rgb(244, 164, 96)
SeaGreen#2E8B57
rgb(46, 139, 87)
SeaShell#FFF5EE
rgb(255, 245, 238)
Sienna#A0522D
rgb(160, 82, 45)
Silver#C0C0C0
rgb(192, 192, 192)
SkyBlue#87CEEB
rgb(135, 206, 235)
SlateBlue#6A5ACD
rgb(106, 90, 205)
SlateGray#708090
rgb(112, 128, 144)
Snow#FFFAFA
rgb(255, 250, 250)
SpringGreen#00FF7F
rgb(0, 255, 127)
SteelBlue#4682B4
rgb(70, 130, 180)
Tan#D2B48C
rgb(210, 180, 140)
Teal#008080
rgb(0, 128, 128)
Thistle#D8BFD8
rgb(216, 191, 216)
Tomato#FF6347
rgb(255, 99, 71)
Turquoise#40E0D0
rgb(64, 224, 208)
Violet#EE82EE
rgb(238, 130, 238)
VioletRed#D02090
rgb(208, 32, 144)
Wheat#F5DEB3
rgb(245, 222, 179)
White#FFFFFF
rgb(255, 255, 255)
WhiteSmoke#F5F5F5
rgb(245, 245, 245)
Yellow#FFFF00
rgb(255, 255, 0)
YellowGreen#9ACD32
rgb(154, 205, 50)

Appendix

无聊的时候可以学习一下各种颜色~~

  • 12
    点赞
  • 62
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 你可以使用 react-markdown 这个库来实现 markdown 编辑器,它支持代码块的语法高亮。你可以使用以下代码来实现: ``` import ReactMarkdown from 'react-markdown'; import CodeBlock from './CodeBlock'; function MarkdownEditor({ markdown }) { return ( <ReactMarkdown source={markdown} renderers={{ code: CodeBlock }} /> ); } ``` 其中,CodeBlock 是一个自定义组件,用于渲染代码块。你可以在 CodeBlock 组件中使用 highlight.js 等库来实现语法高亮。 ### 回答2: 要编写 React Markdown 编辑器,您可以按照以下步骤进行操作: 1. 首先,您需要创建一个 React 组件来作为编辑器的容器。可以使用 `create-react-app` 创建一个新的项目,然后在项目中创建一个名为 `MarkdownEditor` 的组件。 2. 在组件的 `state` 中添加一个 `text` 属性,用于保存用户在编辑器中输入的文本。 3. 在 `render` 方法中,将一个 `<textarea>` 元素添加到组件中,将其值设置为 `text` 属性,并在 `onChange` 事件中更新 `text` 的值。这样,当用户在文本框中输入或编辑时,`text` 属性将自动更新。 4. 接下来,您可以引入一个用于解析和渲染 Markdown 的库,如 `marked` 或 `react-markdown`。安装所需的库,并将其导入到 `MarkdownEditor` 组件中。 5. 在组件的 `render` 方法中,使用 `marked` 或 `react-markdown` 库来将 Markdown 文本渲染为 HTML。您可以将渲染后的 HTML 放置在一个 `<div>` 元素中,并将其显示在编辑器下方,以便用户可以预览他们的 Markdown 文本。 6. 最后,您可以根据需要添加其他功能,如保存编辑的 Markdown 文本、导出为其他文件格式等。这些功能可以通过添加适当的按钮和事件处理函数来实现。 综上所述,编写 React Markdown 编辑器的关键步骤包括创建组件、设置 state、渲染输入框和预览区域,并使用 Markdown 渲染库将文本转换为 HTML。根据您的需求,您还可以添加其他功能来扩展编辑器的功能。 ### 回答3: React Markdown编辑器是一个能够允许用户使用Markdown语法来编辑和渲染文本的组件。下面是一个简单的示例,展示了如何使用React库来编写一个基本的Markdown编辑器。 首先,我们需要引入React和其他必要的库: ```javascript import React, { useState } from 'react'; import ReactMarkdown from 'react-markdown'; ``` 接下来,我们定义一个名为MarkdownEditor的函数组件,并使用useState钩子来管理用户在编辑器中输入的文本: ```javascript function MarkdownEditor() { const [markdownText, setMarkdownText] = useState(''); const handleInputChange = (event) => { setMarkdownText(event.target.value); } return ( <div> <textarea value={markdownText} onChange={handleInputChange} /> <ReactMarkdown> {markdownText} </ReactMarkdown> </div> ); } ``` 在这个组件中,textarea元素用于接收用户输入的Markdown文本,并通过handleInputChange函数来更新markdownText状态。然后,将markdownText作为props传递给ReactMarkdown组件,以便渲染Markdown格式的文本。 最后,我们可以在应用的根组件中使用MarkdownEditor组件: ```javascript function App() { return ( <div> <h1>Markdown Editor</h1> <MarkdownEditor /> </div> ); } export default App; ``` 通过在根组件中引入和使用MarkdownEditor组件,我们就可以在应用中显示和编辑Markdown文本了。 以上是一个简单的React Markdown编辑器的实现示例。你还可以根据自己的需求进行扩展和修改,比如添加更多的Markdown语法支持、自定义样式等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值