码迷,mamicode.com
首页 > 其他好文 > 详细

md1

时间:2018-06-14 14:31:26      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:个人   安全   for   图片   独立   ble   cache   url   做了   

微信公众号:颜家大少
如有问题或建议,请公众号留言
最近更新:2018-02-26,请参考UpdateList [^1]

Md2All 简介

Markdown排版利器,支持 "一键排版" 的样式模板选择,支持自定义css,支持80多种代码高亮。
能让Markdown内容,无需作任何调整就能同时在微信公众号、博客园、掘金、知乎、csdn、51cto、wordpress、hexo。。。等平台正确显示当前预览的效果。
并能生成相应的Html文档。
Md2All完整教程请参考:https://www.cnblogs.com/garyyan/p/8329343.html

  • 微信公众号 特别做了优化:
    支持代码块,并解决常见的代码块换行不正确,特别是iPone、iPad上不能滚动的问题;
    解决把内容粘贴到公众号时,图片、或样式丢失的问题;
    对公众号,我特别写了篇文章,请参考此博文:http://www.cnblogs.com/garyyan/p/8243696.html

  • 支持通用的Markdown语法[^2]和部分扩展语法(如:表格[^3],任务列表[^4],katex数学公式[^5],注脚[^6],内容目录TOC[^7] 等...),并对html,css样式有很好的支持(请看后面示例的高级使用部分[^8]);

  • 预览ok后,只需点 "复制" 按键,再粘贴到公众号即可;
    注意:是点"复制"这个图标,已实现:全选+复制,不能用ctrl+c,或右键的复制

  • 另外

一些小提示:

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

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

  • 未做浏览器兼容测试,请尽可能使用 Chrome 浏览器作编辑!

  • 未配备高容量的图片服务器,目前只支持已上传了的图片的链接。如果需要用到图片,
    你可先在支持Markdown编辑的博客平台(如CSDN、掘金、简书等) 上编辑好你的Markdown内容,上传你所需要的所有图片(上传图片时,markdown内容会自动添加图片链接的),并保存;
    然后把Markdown内容copy到Md2All渲染;
    最后"复制","粘贴"..."粘贴" ..到各个平台,整件事就完成了,简单吧;
    当然,你也可以把图片上传到公众号,然后右键图片,选"复制图片地址"拿图片的链接地址;或把Md2All"复制"到公众号后再插入图片。

  • 开发阶段,每个css样式模板的内容都有可能会更新,所以如果你有做过某样式的"保存",你可能需要"恢复预设值"才能看到其最新的css样式。建议你整合自己喜欢的样式到"最爱样式"下,并在此基础上,在"最爱样式"页面下自定义css样式。

  • 可能有些朋友同一篇文章中的标题都喜欢用不同的样式,只要把css样式模板下的h1,h2,h3,h4,h5,h6font-size,color等定义为你想要的样式,然后用h1 ~ h6来分别表示不同样式的标题就行了。
    同理,不常用的:em 斜体 ,del 删除线,strong em强调的斜体,也可定义为自己想要的不同的样式,然后作为额外的功能使用。
    你甚至可以直接用HTML和CSS来排版。请参考 "综合示例" 样式模板。

  • 更多功能正在开发中,敬请关注。。。。。。
    ***

    先看看代码块显示效果

    注: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),
默认为图片居中,如果想居左时,请打开"一键排版"下的css样式中的img{margin:0 0;},
[这里写图片描述]中对图片的描述内容会自动生成在图片的底部,对应样式figcaption{}


看看对Markdown基本语法的支持

H1

H2

H3

H4

H5
H6

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

试试强调

试试斜体

试试强调的斜体
试试 删除
试试外链的超链接:我是外链的超链接,markdown对链接的语法为:[](),如:[我是外链的超链接](http://blog.csdn.net/gary_yan/article/details/78645303)
试试页内的超链接:我是页内的超链接,注:你先要在要跳转的到地方放置一个类似:<a id="footnote-1">任意内容</a>的锚点。由id="footnote-1"来匹配。

有序列表

  1. 有序列表 1
  2. 有序列表 2
  3. 有序列表 3

无序列表

  • 无序列表 1
  • 无序列表 2
  • 无序列表 3

引用块
只需要在前面加 >,如下:

我是引用块
微信公众号:颜家大少
欢迎关注我,一起学习,一起进步!


表格
| 班级 | 男生 | 女生 |
|-----|-----|------|
| 一(7)班 | 30 | 25 |
| 一(8)班 | 25 | 30 |

注:表格在公众号预览时,可能在PC端显示的不是正确的全屏,但在手机上预览时就会正常显示为全屏的了。

再看看对Markdown扩展语法的支持


任务列表:

  • [x] 任务1,已完成;
  • [x] 任务2,已完成;
  • [ ] 任务3,未完成;


katex数据公式:
行内显示:$e^{x^2}\neq{e^x}^2$,再来一个:$\sin\alpha+\sin\beta=\sin\gamma$

块显示
$$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$$

和:

$$\sum_{i=1}^n i^3 = \left( \frac{n(n+1)} 2 \right) ^2$$
注:很遗憾告诉你,像上面这种座标位置 "复杂点" 的公式,涉及到的一些属性 公众号 并不支持,建议你用http://quicklatex.com/来生成相应的图片Url,再把图片Url链接到文中。
如下,链的是上面数学公式在http://quicklatex.com/生成图片对应的链接Url:
技术分享图片


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


试试TOC:

自动生成目录

[TOC]

第1章 C++入门

1.1 从C到C++

...内容

1.2 程序与语言

...内容

第2章 基本数据类型

2.1 字符集

...内容

2.2 基本数据类型

...内容

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


高级部分

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

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

试试内容居中

那内容居右呢?

来个综合的试试
第二行

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

1试试首字突出

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


Update List:


版本号:V2.6.1
更新日期:2018-02-26
1:解决V2.6.0版本中,当图片url中含有特殊字符时(如@的转义字符%40)可能解析错误的问题;
2:解决在一些特殊机型的手机(如OPPO R11)上,代码块的缩进没效果的问题;
3:解决在代码块中含有成对出现的~时,代码会被转换的问题。


版本号:V2.6.0
更新日期:2018-02-05
1:增加图片注释内容显示,并增加相应的css样式figcaption{};
2:支持内容目录[TOC][^7],能根据所有的标题自动生成目录表,并自动实现链接。并在每个模板中增加相应.toc{}的样式;
3:增加对go,kotlin,lua这几种编程语言的高亮;
4:对“综合示例”的标题h2进行修改;


版本号:V2.5.0
更新日期:2018-02-04
1:增加"代码行数显示"选项,让用户选择是否显示代码的行数;
2:更新"标题突出"样式,之前的版本在复制到公众号时,标题样式无效,现版本提供html的解决方法,不过要用户自己根据说明去更改
3:更新"网格背景"和"综合示例"样式,解决网格在FireFox上显示可能不对的问题。
4:解决"标题前修饰"找不到样式文件的问题
5:增加网站备案号显示


版本号:V2.4.0
更新日期:2018-01-22
1:修改编辑栏的主色调,使编辑和预览对比强点。并把编辑栏的输入语法检测去掉;
2:增加material color的选择面板,方便自定义颜色时作参考;
3: 增加"标题淡雅","标题倒挂","标题后修饰 ","网格背景"样式,并对"标题首字突出","标题四边框","标题上下边框"进行了调整;
4: 在"综合示例 " 中增加更多的参考,让你更清楚知到怎样改样式
4:解决一些katex公式显示不正确的问题,如:
$$H(D_2) = -(\frac{2}{4}?log_2 \frac{2}{4} + \frac{2}{4}?log_2 \frac{2}{4}) = 1$$


版本号:V2.3.0
更新日期:2018-01-10

  1. 增加了这些样式:标题下边框,标题上下边框,标题四边框,标题首字突出,综合示例。并在每个样式下面增加了更多的说明;
  2. 把每个样式下面的p code{}改为code {}避免行内代码的样式在列表时可能失效;
  3. 更新了引用块样式,使其更改再有代表性。

版本号:V2.2.0
更新日期:2018-01-04

  1. 增加任务列表[^4],katex数学公式[^5],注脚[^6]; 并在每个样式文件下增加其对应的css样式.

版本号:V2.1.0
更新日期:2017-12-20

  1. 增加文件导出功能,使能导出包含样式的html文件;
  2. 把编辑栏的横向滚动的功能去掉,现在的做法是当用户输入内容的长度超出输入框时,会自动换行到下一行,而不是之前的向右滚动,感觉这样编辑体验会好点;
  3. 增加css样式:‘标题背景渐变‘和‘字距偏大‘;
  4. 增加table的demo及相应样式table{};
  5. 每个模式下增加,使图片默认居中,并图片不会超出屏幕,这样会更接近实际的情况:
    img
    {
    display: block;
    margin:0 auto;
    max-width:100%;
    }
    a {
    word-wrap:break-word;

版本号:V2.0.7
更新日期:2017-12-06

  1. 在所有样式主题下增加行内代码(p code)、和斜体(em)的css样式值,及相应的demo

  2. "一键排版"下所有样式主题文件中增加说明,使不熟悉css的朋友更清楚相应的功能
  3. 增加图片居中demo


版本号:V2.0.6
更新日期:2017-12-04

  1. 增加支持h1~h6 span下的:before和:after, 并增加对应"标题前后修饰"样式
  2. 基于掘金网的更新,而更新了"掘金样式"

版本号:V2.0.5
更新日期:2017-11-29

  1. 对"一键排版"中的"掘金样式"进行更详细的描述;
    注:"掘金"的PC端浏览器显示是OK的,但手机端app现在还不支持自定义样式,所以会看到有些样式丢失了,此问题已向 "掘金" 的技术人员反馈,他们答复会尽快修复.
  2. 对"代码主题"中的"xt256"的padding进行了调整使边距更合理;

版本号:V2.0.4
更新日期:2017-11-27

  1. 在"一键排版"中增加"掘金样式",增加到掘金网的支持。

版本号:V2.0.3
更新日期:2017-11-27

  1. 把HTML功能拿掉。考虑到用户很少用到。如果想看相应的HTML只需“复制”到文本编辑器中即可。

版本号:V2.0.2
更新日期:2017-11-24

  1. 解决“一键排版”中一些全局样式无效的情况
  2. 增加“一键排版”更多的样式,并开放了所有的css样式供你修改
    注:会重设所有的样式,你之前保存的会无效。
  3. 把之前保存到cookie中的一些内容保存到local stage下,避免4KB的限制
  4. “复制"内容到csdn,博客园时,不再需要点选HTML

版本号:V2.0.1
更新日期:2017-11-20

  1. 解决代码块加注释‘//‘时导致后面的highlight失效的问题
  2. 只有html模式时才把空格转为转义字符;

版本号:V2.0.0
更新日期:2017-11-13

  1. 增加css样式参考模板,及自定义css样式
  2. 增加HTML源码功能,可把HTML源码直接“复制"/"粘贴”到 csdn、博客园等的html编辑器或富文本编辑器下的html中,这样能保持所有的样式
  3. 增加编辑和预览的滚动条同步滚动的功能(现在还不是很精确,之后会再改善)
  4. 增加favorite代码样式下少的一些属性
  5. 增加选“编辑”后,自动保存草稿到本地浏览器缓存的功能。
  6. 增加指定代码所属语言的示例
    ***
    版本号:V1.0.4
    更新日期:2017-10-20
  7. 更新“代码主题”:favorite下对js和css的显示
  8. 更新“代码主题”:monokai-sublime和monokai中漏的一些属性
  9. 更新说明文档
    ***
    版本号:V1.0.3
    更新日期:2017-10-18
  10. 把“代码紧凑”模式下的代码间的行距加大
    ***
    版本号:V1.0.2
    更新日期:2017-10-17
  11. 增加一个很酷的“代码主题”:favorite,并作为默认主题
  12. 增加“代码紧凑” 的选项,使手机一屏能显示更多的代码
    ***

版本号:V1.0.1
更新日期:2017-10-13

  1. 第一个版本正式上线
    ***

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

md1

标签:个人   安全   for   图片   独立   ble   cache   url   做了   

原文地址:https://www.cnblogs.com/sixloop/p/9182312.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!