一键排版 HTML 代码行数 代码紧凑

微信公众号:颜家大少
关注可了解更多的教程及排版技巧。问题或建议,请公众号留言;
如果你觉得Md2All对你有帮助,欢迎赞赏[1]

内容目录(由[TOC]自动生成)

关于网站访问慢的问题Md2All 简介详细教程对公众号、博客的优化代码块显示效果图片显示云图床功能Latex数学公式(能正确复制到公众号等平台):行内公式:$…$块公式:$$…$$Latex复制到公众号等各平台的特别说明复杂的行内公式(顶部和底部突出很多那种),转换后,如果显示不完整,请改为块公式公众号报”图片粘贴失败“时,配合云图床完美解决针对“知乎”的解决方法Tips自动保存一键复制一键排版新版本对某主题样式更新时浏览器兼容性问题,建议用Google chromeMarkdown基本语法标题H5H6行内代码强调斜体强调的斜体删除外链的超链接页内的超链接有序列表无序列表引用块分隔线Markdown扩展语法表格任务列表注脚TOC直接支持html,css1试试首字突出赞赏Md2All版本更新记录

关于网站访问慢的问题

有时网站的访问不稳定,可分别尝试不同的服务器
服务器1,http://md.aclickall.com
服务器2,http://md2.aclickall.com

Md2All 简介

Markdown排版利器,支持 "一键排版" 、自定义css、80多种代码高亮。
能让Markdown内容,无需作任何调整就能一键复制到微信公众号、博客园、掘金、知乎、csdn、51cto、wordpress、hexo。。。等平台。
支持把图片自动上传到云图床;
支持Latex数学公式在公众号等平台完美显示;
支持生成带样式的html文件;
甚至支持直接用原生的html,css排版。

详细教程

Md2All详细教程,请参考:https://www.cnblogs.com/garyyan/p/8329343.html

对公众号、博客的优化

支持代码块,并解决常见的代码块换行不正确,特别是iPone、iPad上不能滚动的问题;
解决把内容粘贴到公众号时,图片、或样式丢失的问题;

支持直接把页面"复制"到 "CSDN" 和 "博客园" 中,所有的样式保持一致。
请参考此博文:http://blog.csdn.net/gary_yan/article/details/78645303
支持直接把页面"复制"到 "掘金" 中:
请参考此博文:https://juejin.im/post/5a1bcc6ef265da431f4acb09
支持直接把页面"复制"到 "知乎" 、51CTO、worpress ,hex……中。

代码块显示效果

注:markdown对代码块的语法是开始和结束行都要添加:```,其中 ` 为windows键盘左上角那个,如下:

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,如下:

function DisplayWindowSize(){

  var w=window.innerWidth
  || document.documentElement.clientWidth
  || document.body.clientWidth;
}

如果所有的"代码主题"都不符合你的要求,你可以参考"一键排版"下的"代码块样式"自定义自己喜欢的代码高亮

图片显示

下面的是我的公众号二维码图片,欢迎关注。

图注:大少公众号
图注:大少公众号

注:markdown对图片链接的语法是:![](),如:![这里写图片描述](http://img.blog.csdn.net/20171012163602706),
可直接把网络图片地址添加到markdown中,
默认为图片居中,如果想居左时,请打开"一键排版"下的css样式中的img{margin:0 0;},
[这里写图片描述]中对图片的描述内容会自动生成在图片的底部,对应样式figcaption{}

云图床功能

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

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

“复制”时会自动把Latex数学公式转换为图片,并自动上传到云图床(如果在“图片”设置了“…,自动上传到云图床”)。
请参考:Md2All,让公众号完美显示Latex数学公式

行内公式:$…$

是的,我就是行内公式:ex2̸=ex2e^{x^2}\neq{e^x}^2,排得OK吗?

块公式:$$…$$

ex2̸=ex2e^{x^2}\neq{e^x}^2
来个 "复杂点" 的:
H(D2)=(24 log224+24 log224)=1H(D_2) = -(\frac{2}{4}\ log_2 \frac{2}{4} + \frac{2}{4}\ log_2 \frac{2}{4}) = 1
矩阵:
(1a1a12a1n1a2a22a2n1amam2amn) \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

针对“知乎”的解决方法

知乎是一个比较神奇的网站,会把你的所有的样式恢复为默认的,并图片一定是居中的,也不能直接复制本地的图片。
所以你如果想要在知乎上正常显示:
1:只用块公式,或你可以接受行内公式在知乎上显示变成了块公式;
2:设置云图床,参考上面公众号那样设置“图片”->“…,自动上传到云图床”。

Tips

自动保存

请点击左上角"编辑"图标再开始写作,这样就能自动保存写作内容,目前,所有保存的内容都是储存在本地浏览器缓存中(local storage),所以,就算重新开机,这些内容都不会丢失的呵,但为了安全起见,在未实现帐号云同步功能前,请自行备份重要内容;

一键复制

一键复制 请点击工具栏的 复制,否则会可能出现奇怪的问题。

一键排版

"一键排版" 支持标准的css,已提供了不少的样式模板,但因为每个人的喜好不一样,所以,如果现有的样式模板不适合你,请尽情地自定义css样式吧。
就算改错了也就"恢复预设值"就OK了,所以不用担心呵。一旦掌握自定义css样式后,你就会知到它到底有多大的威力了 ^_^;

新版本对某主题样式更新时

当你保存了某排版主题的样式后,Md2All默认会使用你此主题保存的样式,所以,当新版本的Md2All对此主题样式有更新时,你需要“恢复预设值”才能看得到最新的样式。“恢复预设值”前,你可能需要备份一下你之前更改过的样式,否则会被覆盖掉。所以,我建议你把自己的样式保存在“最爱样式”下。

浏览器兼容性问题,建议用Google chrome

本人用Google Chrome 和Firefox 浏览器做测试时,没发现问题,但用Safari时会存在问题。如果你发现有奇怪的问题,建议用Google chrome。

Markdown基本语法

标题

支持6种大小的标题,分别对应#,##,###,####,#####,######,和样式文件中的h1,...,h6如:

H5
H6

行内代码

如:AppCompatActivity类,markdown对行内代码的语法是前后用:`,其中 ` 为windows键盘左上角那个,

强调

我是强调

斜体

试试斜体

强调的斜体

试试强调的斜体

删除

试试 删除

外链的超链接

试试外链的超链接:我是外链的超链接,markdown对链接的语法为:[](),如:[我是外链的超链接](http://blog.csdn.net/gary_yan/article/details/78645303)

页内的超链接

试试页内的超链接:我是页内的超链接,注:你先要在要跳转的到地方放置一个类似:<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端显示的不是正确的全屏,但在手机上预览时就会正常显示为全屏的了。

任务列表

    任务1,已完成;

    任务2,已完成;

    任务3,未完成;

注脚

我是注脚[10]。点点就能知到我跳到了那儿。
或跳到放置:<a id="footnote-10">任意内容</a>的地方,[10] 对应id="footnote-10"

TOC

看内容目录就是用[toc]生成的
注:只要放置:[TOC],就能把其后面的标题如:#,##,...######自动生成目录树,注意,[TOC]要独立一行,并前面和后面都要空一行

直接支持html,css

如果你懂html和css,那下面这些效果就不在话下了:

来个页内跳转,跳转到文未的:<a id="jump_1">我是页内跳转到的位置</a> ,对应:id="jump_1"
先给点颜色你看看
再给点颜色你看看
试试改变字体大小
改变字体大小,再来个粗体又如何?

试试内容居中

那内容居右呢?

来个综合的试试
第二行

请参考"一键排版"中的"标题首字突出"样式的提示修改,可把此标题首字突出:

1试试首字突出

注:理论上Md2All是支持所有标准的html和css,但问题是公众号很多都不支持,所以上面只演示了部分支持的。


赞赏Md2All

如果你觉得到Md2All对你有帮助,欢迎赞赏,有你的支持,Md2All一定会越来越好!

大少赞赏码
大少赞赏码

版本更新记录


版本号:V2.8.4
更新日期:2019-06-13
1:解决在iphone手机上代码不能横向滚动的问题

版本号:V2.8.3
更新日期:2018-07-09
1:增加对以下语言的highlight
dart,r,delphi,vb(vbnet),vbs(vbscript),vbscript-html

版本号:V2.8.2
更新日期:2018-06-28
1:结合云图床,解决了Latex公式复制到公众号时有可能报“图片粘贴失败的问题”;
2:结合云图床,解决了Latex公式复制到知乎的问题;
3:点“图片”图标时,在云图床设置上新增了:“需要转换为图片的内容,会自动上传到云图床”选项
4:在“一键排版”的各样式文件中更新了Latex的样式,主要是显示的大小,你可能需要“恢复预设值”才能看到新的样式.

更多请参考
Md2All版本更新记录


我是页内跳转到的位置
[10]: 注脚跳转位置 111

/*可任意修改样式,或恢复预设值,保存后生效 相对“默认样式”而作的修改会用 红色 标注*/ .output_wrapper/*此属性为全局*/ { font-size: 16px; color: #3e3e3e; line-height: 1.6; word-spacing:0px; letter-spacing:0px; font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif; } .output_wrapper * { font-size: inherit ; color: inherit; line-height: inherit; margin:0px; padding:0px; } p {/*段落*/ margin: 1.5em 0px; } h1,h2,h3,h4,h5,h6 { margin: 1.5em 0px; font-weight:bold; } h1 { font-size: 1.6em ; } h2 { font-size: 1.4em; } h3 { font-size: 1.3em; } h4 { font-size: 1.2em; } h5 { font-size: 1em; } h6 { font-size: 1em; } h3 {/*增加对H3标题属性的修改*/ margin-bottom:2em; margin-right: 5px; padding: 8px 15px; letter-spacing: 2px; background-image: linear-gradient(to right bottom, rgb(0, 188, 212), rgb(63, 81, 181)); background-color: rgb(63, 81, 181); color: rgb(255, 255, 255); border-left: 10px solid rgb(51, 51, 51); border-radius:5px; text-shadow: rgb(102, 102, 102) 1px 1px 1px; box-shadow: rgb(102, 102, 102) 1px 1px 2px; } ul, ol { padding-left: 32px; } ul{ /*无序列表*/ list-style-type: disc; } ol { /*有序列表*/ list-style-type: decimal; } li * { /* color: #3e3e3e;*/ } li{ /*在公众号下,改变不了li符号的属性(如颜色),并会影响其子元素的属性;而在其它博客平台中,则能正常使用*/ margin-bottom: 0.5em; /* color:#159957; */ } .code_size_default /*代码块默认size*/ { line-height: 18px; font-size: 14px; font-weight:normal; word-spacing:0px; letter-spacing:0px; } .code_size_tight /*代码块紧凑size*/ { line-height: 15px; font-size: 11px; font-weight:normal; word-spacing:-3px; letter-spacing:0px; } pre code /*代码块*/ { font-family: Consolas, Inconsolata, Courier, monospace; border-radius: 0px; } blockquote { /*引用块*/ display: block; padding: 15px 1rem; font-size: 0.9em; padding-right: 15px; margin: 1em 0; color: #819198; border-left: 6px solid #dce6f0; background: #f2f7fb; overflow: auto; overflow-scrolling: touch; word-wrap: normal; word-break: normal; } blockquote p { margin: 0px; } a { /*超链接*/ text-decoration: none; color: #1e6bb8; word-wrap:break-word; } strong /*强调*/ { font-weight: bold; } em /*斜体*/ { font-style:italic; } del /*删除线*/ { font-style:italic; } strong em/*强调的斜体*/ { font-weight: bold; } hr { /*分隔线*/ height: 1px; margin: 1.5rem 0px; border: none; border-top: 1px dashed #A5A5A5; } code /*行内代码*/ { word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin:0 2px; color:#e96900; background:#f8f8f8; } img { display: block; margin:0 auto; /*图片水平居中*/ /* margin:0 0; */ /*图片水平居左,如需要请打开*/ max-width:100%; } figcaption/*图片描述文字*/ { margin-top:10px; text-align:center; /* text-align:left; */ /*当图片水平居左时,请打开*/ color:#999; font-size: 0.7em; } /*================表格开始================*/ table { display:table; width: 100% ; text-align: left; } tbody { border: 0; } table tr { border: 0; border-top: 1px solid #CCC; background-color: white; } /*隔行改变行的背景色,如需要请打开*/ /* table tr:nth-child(2n) { background-color: #F8F8F8; } */ table tr th, table tr td { font-size: 1em; border: 1px solid #CCC; padding: 0.5em 1em; text-align: left; } /*表头的属性*/ table tr th { font-weight: bold; background-color: #F0F0F0; } /*================表格结束================*/ /*================数学公式开始================*/ .katex-display {/*块公式*/ font-size:1.22em; } .katex {/*行内公式*/ padding:8px 3px; } .katex-display > .katex {/*块公式*/ display:inline-block; text-align:center; padding:3px; } .katex img {/*行内公式对应的图片*/ display:inline-block; vertical-align:middle; } /*================数学公式结束================*/ a[href^="#"] sup {/*注脚*/ vertical-align:super; margin:0 2px; padding:1px 3px; color: #ffffff; background:#666666; font-size:0.7em; } /*================任务列表开始================*/ .task-list-list { list-style-type: none; } .task-list-list.checked {/*已完成*/ color: #3e3e3e; } .task-list-list.uncheck {/*未完成*/ color: #bfc1bf; } .task-list-list .icon_uncheck, .task-list-list .icon_check { display: inline-block; vertical-align: middle; margin-right: 10px; } .task-list-list .icon_check:before {/*已完成*/ content: "√"; border: 2px solid #3e3e3e; color:red; } .task-list-list .icon_uncheck:before {/*未完成*/ content: "x"; border: 2px solid #bfc1bf; color: #bfc1bf; } .task-list-list .icon_check:before, .task-list-list .icon_uncheck:before {/*标志框*/ padding:2px; padding-left: 5px; padding-right: 8px; border-radius:5px; } /*================任务列表结束================*/ .toc {/*总目录*/ margin-left:25px; } .toc_item {/*每条目录*/ display:block; } .toc_left {/*每级目录的缩进*/ margin-left:25px; }
已保存!
退出 生成文件
abcd
red
#FFEBEE#FFCDD2#EF9A9A#E57373#EF5350#F44336#E53935#D32F2F#C62828#B71C1C#FF8A80#FF5252#FF1744#D50000