markdown编辑器实现代码高亮

前言:笔者之前是使用富文本编辑器,现在转用markdown编辑器,但是在写文章的时候发现即使博客主页设置用上了代码高亮皮肤,但还是在插入代码段的时候不起作用,查阅了他人的博客才发现要加上key描述
类似这样,比如你写c++代码,你要在’’'之后加上c++语言的key:cpp,这样就可以实现你的代码高亮了,下面表格附上各类语言的关键字key(注:表格转自

#include<bits/stdc++.h>
using namespace std;
int main()
{
   printf("hello,world!");
   return 0;
}

下面还有一个python的代码高亮例子

语言名关键字
Bashbash
CoffeeScriptcoffeescript
C++cpp
C#cs
CSScss
Diffdiff
HTTPhttp
Iniini
Javajava
JavaScriptjavascript
JSONjson
Makefilemakefile
Markdownmarkdown
Objective-Cobjectivec
Perlperl
Pythonpython
Rubyruby
SQLsql
XMLxml
ARM汇编armasm
AVR汇编avrasm
MIPS汇编mipsasm
x86汇编x86asm
Elixirelixir
Elmelm
Erlangerlang
F#fsharp
Haskellhaskell
GLSLglsl
Clojureclojure
Lisplisp

简单例子(实现python代码块高亮)

修改查找元素   对列表的主要操作是增删改查
a=[1,2,3,4,5,6]
print(a.index(5))  输出4,表示5在这个列表中,第一次出现的下标为4,
对于index方法而言,如果要查找的元素在列表中出现了多次,就显示第一次出现的下标,并且查找时要保证查找元素在列表中,否则会报错
value=a[1]
print(value)
print(a.count(2))# count 方法表示查找指定元素出现次数,与index方法不同的是,如果要查找的元素没有出现则输出零,不会报错
一个小技巧
e.g a=["周一","周二","周三","周四","周六","周五","周日"]
#很明显列表中周六和周五位置反了,我们现在要交换它们
a[4],a[5]=a[5],a[4] #这样操作即可,和C语言表达有所差别
赋值也可这样
a,b,c=1,2,3
s="周一,周二,周三,周四,周六,周五,周日"
a=s.split(",")
print(a)# 形成的a是一个列表,这样就实现了字符串转列表
#我们还可以将列表转成字符串
a1="*".join(a) #前面可填连接的填充物,不填则“”,注意使用join方法必须保证a列表中所有元素是同一类型
print(a1)
  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值