CSDN创作技巧

admin管理员组

文章数量:1662626

​

CSDN创作技巧

• 一、快捷键
• • 1.1 在csdn上实现自动颜色区分汉字和英文
  • • 1.1.1 插入CSS代码的快捷键是Ctrl + Shift + C。
    • 1.1.2
    • 1.1.3 插入jQuery代码的快捷键是Ctrl + Alt + J。
• 二、MD编辑器技巧及效果图
• • 2.1 代码片
  • • 2.1.1
    • 2.2.2
    • 2.2.3
    • 2.2.4
  • 2.2 classDiagram类图
  • 2.3 Flowchart流程图
  • 2.4 Mermaid流程图
  • 2.5 UML图
  • 2.6 UML图
  • 2.7 数学公式
  • 2.8 自定义列表
  • 2.9 注释
  • 2.10 注脚
  • 2.11 表格
  • 2.12 链接
  • 2.13 图片
  • • 2.13.1 纯图片
    • 2.13.2 带尺寸图片
    • 2.13.3 宽度确定高度等比例的图片
    • 2.13.4 高度确定宽度等比例的图片
    • 2.13.5 居中图片
    • 2.13.6 居中并且带尺寸的图片
    • 2.13.7 居右的图片
  • 2.14 列表
  • 2.15 文本样式

一、快捷键

1.1 在csdn上实现自动颜色区分汉字和英文

1.1.1 插入CSS代码的快捷键是Ctrl + Shift + C。

使用CSS样式：在csdn的样式文件中添加以下CSS代码来定义颜色区分汉字和英文：

.chinese {
    color: red; /* 定义汉字的颜色 */
}

.english {
    color: blue; /* 定义英文的颜色 */
}

1.1.2

使用JavaScript：在csdn的HTML文件中添加以下JavaScript代码来实现自动颜色区分汉字和英文：

window.onload = function() {
    var elements = document.getElementsByTagName("*");
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        var text = element.innerHTML;
        var chinesePattern = /[\u4e00-\u9fa5]/g; // 汉字的正则表达式
        var englishPattern = /[A-Za-z]/g; // 英文的正则表达式
        text = text.replace(chinesePattern, "<span class='chinese'>$&</span>"); // 将汉字加上span标签，并加上chinese类名
        text = text.replace(englishPattern, "<span class='english'>$&</span>"); // 将英文加上span标签，并加上english类名
        element.innerHTML = text;
    }
}

这段代码会在页面加载完毕后，遍历所有元素，将汉字和英文分别加上span标签，并加上对应的类名，从而实现自动颜色区分汉字和英文。

1.1.3 插入jQuery代码的快捷键是Ctrl + Alt + J。

使用jQuery：如果你已经在csdn上引入了jQuery库，可以使用下面的代码来实现自动颜色区分汉字和英文：

$(document).ready(function() {
$(“body *”).each(function() {
var text = ( t h i s ) . h t m l ( ) ; v a r c h i n e s e P a t t e r n = / [ 4 ˘ e 00 − 9 ˘ f a 5 ] / g ; / / 汉字的正则表达式 v a r e n g l i s h P a t t e r n = / [ A − Z a − z ] / g ; / / 英文的正则表达式 t e x t = t e x t . r e p l a c e ( c h i n e s e P a t t e r n , " < s p a n c l a s s = ′ c h i n e s e ′ > (this).html(); var chinesePattern = /[\u4e00-\u9fa5]/g; // 汉字的正则表达式 var englishPattern = /[A-Za-z]/g; // 英文的正则表达式 text = text.replace(chinesePattern, "<span class='chinese'> (this).html();varchinesePattern=/[4˘e00−9˘fa5]/g;//汉字的正则表达式varenglishPattern=/[A−Za−z]/g;//英文的正则表达式text=text.replace(chinesePattern,"<spanclass=′chinese′>&"); // 将汉字加上span标签，并加上chinese类名
text = text.replace(englishPattern, “$&”); // 将英文加上span标签，并加上english类名
$(this).html(text);
});
});

这段代码会在页面加载完毕后，遍历所有元素，将汉字和英文分别加上span标签，并加上对应的类名，从而实现自动颜色区分汉字和英文。

这些方法可以根据需要进行简单的修改，例如修改CSS样式中的颜色、修改正则表达式来匹配其他语言等。

二、MD编辑器技巧及效果图

2.1 代码片

下面展示一些 内联代码片。

2.1.1

2.2.2

javascript

2.2.3

bash

2.2.4

2.2 classDiagram类图

Cool Where am i? «interface» Class01 int chimp int gorilla size() AveryLongClass Class09 C2 C3 Class07 Object[] elementData equals() Class10 >>service>> int id size()

mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
<> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
>>service>>
int id
size()
}

2.3 Flowchart流程图

Created with Raphaël 2.3.0 开始 我的操作 确认？ 结束 yes no

mermaid
flowchat
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认？

st->op->cond
cond(yes)->e
cond(no)->op

2.4 Mermaid流程图

链接 长方形 圆 圆角长方形 菱形

mermaid
graph LR
A[长方形] – 链接 --> B((圆))
A --> C(圆角长方形)
B --> D{菱形}
C --> D

2.5 UML图

张三 李四 王五 你好！李四, 最近怎么样? 你最近怎么样，王五？ 我很好，谢谢! 我很好，谢谢! 李四想了很长时间, 文字太长了 不适合放在一行. 打量着王五... 很好... 王五, 你怎么样? 张三 李四 王五

mermaid
sequenceDiagram
张三 ->> 李四: 你好！李四, 最近怎么样?
李四–>>王五: 你最近怎么样，王五？
李四–x 张三: 我很好，谢谢!
李四-x 王五: 我很好，谢谢!
Note right of 王五: 李四想了很长时间, 文字太长了
不适合放在一行.

李四–>>张三: 打量着王五…
张三->>王五: 很好… 王五, 你怎么样?

2.6 UML图

2014-01-06 2014-01-07 2014-01-08 2014-01-09 2014-01-10 2014-01-11 2014-01-12 2014-01-13 2014-01-14 2014-01-15 2014-01-16 2014-01-17 已完成 进行中 计划中 现有任务 Adding GANTT diagram functionality to mermaid

mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section 现有任务
已完成 :done, des1, 2014-01-06,2014-01-08
进行中 :active, des2, 2014-01-09, 3d
计划中 : des3, after des2, 5d

2.7 数学公式

Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n−1)!∀n∈N 是通过 Euler integral

Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t   . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=∫0∞​tz−1e−tdt.

2.8 自定义列表

Markdown

Text-to- HTML conversion tool

Authors

John

Luke

2.9 注释

Markdown将文本转换为 HTML。

2.10 注脚

2.11 表格

项目	Value
电脑	$1600
手机	$12
导管	$1

Column 1	Column 2
centered 文本居中	right-aligned 文本居右

功能	物理卷管理	卷组管理	逻辑卷管理
扫描	pvscan	vgscan	lvscan
建立	pvcreate	vgcreate	lvcreate
显示	pvdisplay	vgdisplay	lvdisplay
删除	pvremove	vgremove	lvremove

2.12 链接

链接: link

2.13 图片

2.13.1 纯图片

图片:

2.13.2 带尺寸图片

带尺寸的图片:
=60x60

2.13.3 宽度确定高度等比例的图片

宽度确定高度等比例的图片:
=60x

2.13.4 高度确定宽度等比例的图片

高度确定宽度等比例的图片:
=x60

2.13.5 居中图片

居中的图片:
#pic_center

2.13.6 居中并且带尺寸的图片

居中并且带尺寸的图片:
#pic_center =60x60

2.13.7 居右的图片

居右的图片:
#pic_right

2.14 列表

• 项目
  • 项目
    • 项目

1. 项目1
2. 项目2
3. 项目3

• 计划任务
• 完成任务
  

2.15 文本样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H2O is是液体。

210 运算结果是 1024。

本文标签： 技巧CSDN