MDX、markdown基本语法
前端|其它
发布于2022-07-13 最近修改2023-07-05
960
0
Shimmer

MDX官网

代码块显示效果

markdown
复制代码
### 代码块显示效果 注:markdown对代码块的语法是开始和结束行都要添加:\`\`\`,其中 \` 为windows键盘左上角那个,如下:
java
复制代码
public class MyActivity extends AppCompatActivity { @Override //override the function protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); try { OkhttpManager.getInstance().setTrustrCertificates(getAssets().open("mycer.cer"); OkHttpClient mOkhttpClient= OkhttpManager.getInstance().build(); } catch (IOException e) { e.printStackTrace(); } }
要精确指定语言(如:java,cpp,css,xml,javascript,python,php,go,kotlin,lua,objectivec等等)时,在头部直接指定,如:```javascript,如下:
javascript
复制代码
function DisplayWindowSize(){ var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; }

图片显示

markdown
复制代码
### 图片显示 下面的是公众号二维码图片,欢迎关注。 ![图注:BioIT爱好者公众号](https://apps-db.oss-cn-shenzhen.aliyuncs.com/bioitee/bioitee.png) 注:markdown对图片链接的语法是:`![]()`, 如:`![这里写图片描述](https://apps-db.oss-cn-shenzhen.aliyuncs.com/bioitee/bioitee.png)`, 可直接把网络图片地址添加到markdown中, 默认为图片居中,如果想居左时,请打开"一键排版"下的css样式中的`img{margin:0 0;}`, `[这里写图片描述]`中对图片的描述内容会自动生成在图片的底部,对应样式`figcaption{}`

云图床功能

markdown
复制代码
### 云图床功能 Md2All支持云图床,设置好云图床后,能把本地图片自动上传到云图床,并自动生成markdown. [请参考云图床教程:https://www.cnblogs.com/garyyan/p/9181809.html](https://www.cnblogs.com/garyyan/p/9181809.html)

Latex数学公式(能正确复制到公众号等平台)

markdown
复制代码
### Latex数学公式(能正确复制到公众号等平台): “复制”时会自动把Latex数学公式转换为图片,并自动上传到云图床(如果在“图片”设置了“...,自动上传到云图床”)。 [请参考:Md2All,让公众号完美显示Latex数学公式](https://www.cnblogs.com/garyyan/p/9228994.html) #### 行内公式:$...$ 是的,我就是行内公式:$e^{x^2}\neq{e^x}^2$,排得OK吗? #### 块公式:$$...$$ $$e^{x^2}\neq{e^x}^2$$ 来个 *"复杂点"* 的: $$H(D_2) = -(\frac{2}{4}\ log_2 \frac{2}{4} + \frac{2}{4}\ log_2 \frac{2}{4}) = 1$$ 矩阵: $$ \begin{pmatrix} 1 & a_1 & a_1^2 & \cdots & a_1^n \\ 1 & a_2 & a_2^2 & \cdots & a_2^n \\ \vdots & \vdots & \vdots & \ddots & \vdots \\ 1 & a_m & a_m^2 & \cdots & a_m^n \\ \end{pmatrix} $$ 对应“一键排版”的css样式关键字为:`.katex` #### Latex复制到公众号等各平台的特别说明 ##### 复杂的行内公式(顶部和底部突出很多那种),转换后,如果显示不完整,请改为块公式 有些比较复杂的行内公式,转换后,可能会出现顶部和底部很突出的部分看不见的情况,把它改成块公式就OK。 ##### 公众号报”图片粘贴失败“时,配合云图床完美解决 如果你发现复制到公众号时报**”图片粘贴失败“**,那是因为公众号有个很奇怪的问题:当复制很小很小的本地图片时,就可能会报”图片粘贴失败“,而其它的平台暂时没遇到。 解决的办法是点“图片”图标,设置好图床信息,并选“...,自动上传到云图床”。 [请参考云图床教程:https://www.cnblogs.com/garyyan/p/9181809.html](https://www.cnblogs.com/garyyan/p/9181809.html) ##### 针对“知乎”的解决方法 知乎是一个比较神奇的网站,会把你的所有的样式恢复为默认的,并图片一定是居中的,也不能直接复制本地的图片。 所以你如果想要在知乎上正常显示: 1:只用块公式,或你可以接受行内公式在知乎上显示变成了块公式; 2:设置云图床,参考上面公众号那样设置“图片”->“...,自动上传到云图床”。

Markdown基本语法

markdown
复制代码
### Markdown基本语法 #### 标题 支持6种大小的标题,分别对应`#`,`##`,`###`,`####`,`#####`,`######`,和样式文件中的`h1,...,h6`如: ##### H5 ###### H6 #### 行内代码 如:`AppCompatActivity`类,markdown对行内代码的语法是前后用:\`,其中 \` 为windows键盘左上角那个, #### 强调 **我是强调** #### 斜体 试试*斜体* #### 强调的斜体 试试***强调的斜体*** #### 删除 试试 ~~删除~~ #### 外链的超链接 试试外链的超链接:[我是外链的超链接](https://blog.csdn.net/gary_yan/article/details/78645303),markdown对链接的语法为:`[]()`,如:`[我是外链的超链接](https://blog.csdn.net/gary_yan/article/details/78645303)` #### 页内的超链接 试试页内的超链接:[我是页内的超链接](#jump_1),注:你先要在要跳转的到地方放置一个类似:`<a id="jump_1">任意内容</a>`的锚点。由`id="jump_1" `来匹配。 #### 有序列表 1. 有序列表 1 2. 有序列表 2 3. 有序列表 3 #### 无序列表 - 无序列表 1 - 无序列表 2 - 无序列表 3 #### 引用块 只需要在前面加 `>`,如下: >我是引用块 微信公众号:颜家大少 欢迎关注我,一起学习,一起进步! #### 分隔线 *** ### Markdown扩展语法 #### 表格 | 班级 | 男生 | 女生 | |-----|-----|------| | 一(7)班 | 30 | 25 | | 一(8)班 | 25 | 30 | 注:表格在公众号预览时,可能在PC端显示的不是正确的全屏,但在手机上预览时就会正常显示为全屏的了。 ####任务列表 - [x] 任务1,已完成; - [x] 任务2,已完成; - [ ] 任务3,未完成; #### 注脚 我是注脚[^10]。点点就能知到我跳到了那儿。 或跳到放置:`<a id="footnote-10">任意内容</a>`的地方,[^10] 对应`id="footnote-10"` #### TOC 看内容目录就是用`[toc]`生成的 注:只要放置:`[TOC]`,就能把其后面的标题如:`#,##,...######`自动生成目录树,注意,`[TOC]`要独立一行,并前面和后面都要空一行 ### 直接支持html,css 如果你懂html和css,那下面这些效果就不在话下了: <a href="#jump_1">来个页内跳转</a>,跳转到文未的:`<a id="jump_1">我是页内跳转到的位置</a>` ,对应:`id="jump_1"` <span style="color: #5bdaed; ">先给点颜色你看看</span> <span style="color: #AE87FA; ">再给点颜色你看看</span> <span style="font-size:1.3em;">试试改变字体大小</span> <span style="font-size:1.3em;font-weight: bold;">改变字体大小,再来个粗体又如何?</span> <p style="text-align:center"> 试试内容居中 </p> <p style="text-align:right"> 那内容居右呢? </p> <p style="text-align:center;color:#1e819e;font-size:1.3em;font-weight: bold;"> 来个综合的试试 <br/> 第二行 </p> 请参考"一键排版"中的"标题首字突出"样式的提示修改,可把此标题首字突出: ### <span class="firstletter">1</span>试试首字突出
目录