精华内容
下载资源
问答
  • md2all样式

    千次阅读 2018-01-22 13:50:15
    Md2All 简介 Markdown排版利器,还能让Markdown内容,无需作任何调整就能同时在微信公众号、博客园、掘金、csdn等平台正确显示当前预览的效果。并能生成相应的Html文档。 对 微信公众号 做了特别的优化: 支持...

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

    Md2All 简介

    Markdown排版利器,还能让Markdown内容,无需作任何调整就能同时在微信公众号、博客园、掘金、csdn等平台正确显示当前预览的效果。并能生成相应的Html文档。

    • 微信公众号 做了特别的优化:
      支持代码块,并解决常见的代码块换行不正确,特别是iPone、iPad上不能滚动的问题;
      解决把内容粘贴到公众号时,图片、或样式丢失的问题;
      支持135,96等微信编辑器的所用样式(如”标题”等),只需点这些微信编辑器的”html”图标,再把内容拷贝过来即可。
      对公众号,我特别写了篇文章,请参考此博文:http://www.cnblogs.com/garyyan/p/8243696.html

    • 支持 “一键排版” 的css样式模板选择,和自定义css。你一定要试一试它 改头换面 的效果^_^;

    • 对代码块的显示专门做了优化,几十种超酷的 “代码主题” 任你选择;

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

    • 预览ok后,只需点 “复制” 按键,再粘贴到公众号即可;

    • 另外

    • 你甚至可以把当前预览的内容直接 生成html文件

    一些小提示:

    • “一键排版” 支持标准的css,已提供了不少的css样式模板,但因为每个人的喜好不一样,所以,如果现有的样式模板不适合你,那就大胆尝试去改吧。
      样式文件中对常用的用 “绿色” 作注释,并用 “红色” 表示这个是修改过的位置,看看就知到怎样改的了,就算改错了也就”恢复预设值”就OK了,所以不用担心呵。
      一旦掌握自定义css样式后,你就会知到它到底有多大的威力了 ^_^;

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

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

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

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

    • 公众号并不支持外部链接,也不支持注脚跳转,如想支持,请找小龙哥。

    • 更多功能正在开发中,请持续关注。。。。。。


    先看看代码块显示效果

    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();
            }
    }

    markdown对代码块的语法是开始和结束行都要添加:“`,其中`为windows键盘左上角那个,
    要精确指定语言(如:java,cpp,css,xml,javascript,python,php,go等等)时,在头部直接指定,如下:

    function DisplayWindowSize(){
      var w=window.innerWidth
      || document.documentElement.clientWidth
      || document.body.clientWidth;
    }
    ***

    看看图片的显示效果

    注:未配备高容量的图片服务器,目前只支持已上传了的图片的链接(你可以先在公众号,或博客平台上传你想要的图片作为图片库)

    下面的是我的公众号二维码图片,欢迎关注我。
    这里写图片描述
    注:markdown对图片链接的语法是:![](),如:![这里写图片描述](https://img-blog.csdn.net/20171012163602706),
    默认为图片居中,如果想居左时,请打开”一键排版”下的css样式中的img{margin:0 0;}


    ### 看看对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)班3025
    一(8)班2530

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

    ### 再看看对Markdown扩展语法的支持 **任务列表:** - [x] 任务1,已完成; - [x] 任务2,已完成; - [ ] 任务3,未完成; **katex数据公式:** 行内显示: ex2ex2 ,再来一个: sinα+sinβ=sinγ 块显示
    ex2ex2
    来个 *”复杂点”* 的:
    i=1ni3=(n(n+1)2)2
    注:很遗憾告诉你,像上面这种座标位置 *”复杂点”* 的公式,涉及到的一些属性 **公众号** 并不支持,建议你用[http://quicklatex.com/](http://quicklatex.com/)来生成相应的图片Url,再把图片Url链接到文中。 如下,链的是上面数学公式在http://quicklatex.com/生成图片对应的链接Url: ![](http://quicklatex.com/cache3/f3/ql_9c4483ab771d5f2f97441c89404c23f3_l3.png) **试试注脚:** 我是注脚[^1]。跳转到文中放置:` 任意内容`的地方,[^1] 对应`id=”footnote-1”` ***

    高级部分

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

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

    试试内容居中

    那内容居右呢?

    来个综合的试试
    第二行

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


    Update List:


    版本号:V2.3.0
    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

    1. “一键排版”下所有样式主题文件中增加说明,使不熟悉css的朋友更清楚相应的功能
    2. 增加图片居中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
    1. 更新“代码主题”:favorite下对js和css的显示
    2. 更新“代码主题”:monokai-sublime和monokai中漏的一些属性
    3. 更新说明文档


    版本号:V1.0.3
    更新日期:2017-10-18
    1. 把“代码紧凑”模式下的代码间的行距加大


    版本号:V1.0.2
    更新日期:2017-10-17
    1. 增加一个很酷的“代码主题”:favorite,并作为默认主题
    2. 增加“代码紧凑” 的选项,使手机一屏能显示更多的代码


    版本号:V1.0.1
    更新日期:2017-10-13
    1. 第一个版本正式上线


    我是页内跳转到的位置

    展开全文
  • Md2All 简介 Md2All是Markdown的排版利器,支持 “一键排版” 、自定义CSS和80多种代码高亮。 能让Markdown内容,无需作任何调整就能一键复制到微信公众号、博客园、掘金、知乎、CSDN、51cto、wordpress、hexo。。。...

    Md2All 简介

    Md2All是Markdown的排版利器,支持 “一键排版” 、自定义CSS和80多种代码高亮。

    能让Markdown内容,无需作任何调整就能一键复制到微信公众号、博客园、掘金、知乎、CSDN、51cto、wordpress、hexo。。。等平台(亲测有效)。

    除此之外,还有以下优点:

    • 支持把图片自动上传到云图床;
    • 支持Latex数学公式在公众号等平台完美显示;
    • 支持生成带样式的html文件;
    • 甚至支持直接用原生的html,css排版。

    Md2All的遗憾

    只不过,很遗憾的是Md2All官网(http://md.aclickall.com/)提供的模板样式都不能让我满意。

    但Md2All很人性化,支持自定义CSS——程序员最喜欢的就是这个:如果你长得不够漂亮,我可以给你做个手术啊,保证人见人爱!

    琢磨了很久,终于琢磨出来了一个我自己很满意的自定义CSS(纯洁的微笑「我的标杆」竟然也看上了我这套排版),所以我决定分享出来。

    先上代码(你可以直接复制拿走,或者在此基础上改改):

    /*可任意修改样式,或恢复预设值,保存后生效
    相对“默认样式”而作的修改会用  红色 标注*/
    
    .output_wrapper/*此属性为全局*/
    {
         font-size: 16px;
         color: #3e3e3e;
         line-height: 1.6;
          word-spacing:0px; 
         letter-spacing:1px;
         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;
      padding-left:1em;
      padding-right:1em;
    }
    h1,h2,h3,h4,h5,h6 {
      margin: 1.5em 0px;
      font-weight:bold;
      color:#159957;        /*改变了其默认的标题颜色*/
      text-align: center;   /*改变了其默认值,使其标题居中*/
    }
    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;
    }
    
    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: 14px; 
       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-break:break-all;
        word-wrap: break-word;
        padding: 2px 4px;
        border-radius: 4px;
        margin:0 2px;
        background:#f8f8f8;
        font-size: 14px;
        font-weight:normal;
    }
    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;
    }
    

    其中有几个关键的点,我们来详细解释一下。

    1)支持微信公众号的两端缩进。

    将p元素的padding-leftpadding-right设置为1em(em是弹性布局单位,可根据页面基础的font-size「一般来自body元素」来计算实际需要的像素「px」单位)。具体示例如下:

    p {/*段落*/
      margin: 1.5em 0px;
      padding-left:1em;
      padding-right:1em;
    }
    

    2)支持微信公众号的文字间距。

    letter-spacing表示文字之间的间距,暂定为1px。具体示例如下:

    .output_wrapper/*此属性为全局*/
    {
         font-size: 16px;
         color: #3e3e3e;
         line-height: 1.6;
         word-spacing:0px; 
         letter-spacing:1px;
         font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;   
    }
    

    建议:由于手机屏幕越来越大,文字的基础大小不需要再设置为15px了,需要换成更大一点的16px,人们阅读起来会更轻松一点。(所以设置全局的文字大小为font-size: 16px;

    3)支持行内代码换行。

    一般情况下,中文会自动换行;但很多英文在一起的时候,文字间距会莫名其妙地增大,并且换行不及时。

    怎么解决呢?需要在行内代码上加上word-break:break-all;(不仅中文换行,英文该换行也换行)。具体示例如下:

    code /*行内代码*/
    {
        word-break:break-all;
        word-wrap: break-word;
        padding: 2px 4px;
        border-radius: 4px;
        margin:0 2px;
        background:#f8f8f8;
        font-size: 14px;
        font-weight:normal;
    }
    

    需要注意的是,行内代码一定要使用反“``”包裹起来,例如:System.out.println("沉默王二不赞成996;996压榨人性,是效率低下的代表,就像回到农耕时代一样,日出而作,日落而息;效率才是解决问题的王道——可以坐飞机,别再骑马熬时间了!")

    漂亮的排版

    自定义CSS后的排版效果如下:

    在这里插入图片描述

    感觉排版怎么样?

    适当的宣传

    PS:欢迎关注「沉默王二」公众号,后台回复关键字「2048」,即可免费获取「1W+程序员领取的进阶必读资料包」!!

    展开全文
  • 利用Md2all的自定义CSS,给Markdown一个漂亮的排版.pdf
  • markdown排版详解,Md2All实战

    千次阅读 2018-01-23 14:09:59
    Md2All 简介 Markdown排版利器,支持 “一键排版” 的样式模板选择,支持”css样式自定义”,支持80多种代码高亮。 能让Markdown内容,无需作任何调整就能同时在微信公众号、博客园、掘金、知乎、csdn、51cto、...

    Md2All 简介

    Markdown排版利器,支持 “一键排版” 的样式模板选择,支持”css样式自定义”,支持80多种代码高亮。

    能让Markdown内容,无需作任何调整就能同时在微信公众号、博客园、掘金、知乎、csdn、51cto、wordpress、hexo等平台正确显示当前预览的效果。并能生成相应的Html文档。

    富文本编辑器虽然用起来方便,但只能定义部份样式,而Md2All的自定义css,是能定义所有标准的css样式,甚至直接支持HTML排版,功能非常强大呵。

    更详细的信息,请看:http://md.aclickall.com

    本教程主要内容如下:

    • Md2All整体体验;
    • 初识css;
    • 你要知到的;
    • 全局样式自定义;
    • 引用块样式自定义;
    • 段落样式自定义;
    • 粗体、斜体、删除线样式自定义;
    • 分隔线样式自定义;
    • 行内代码样式自定义;
    • 代码块样式自定义;
    • 标题样式自定义
      标题酷酷的改进;
      标题首字突出的改进;
      标题上下边框的改进
    • 最后

    Md2All整体体验

    image

    我会先点左上角的 “编辑” 图标后才开始写作,这样,写作的内容会自动保存在浏览器的缓存中。大家会看到,就是常用的几条markdown指令,经Md2All渲染后,整个效果就变得高大上了,你可以选择自己喜欢的样式模板,OK后,一键“复制”到公众号中,整件事就完成了,整个过程非常简单。


    “复制”指的是工具栏的那个“复制”图标,已实现:全选+复制,不能用ctrl+c,也不能用右键的“复制”呵;

    所有的“保存”,目前是保存在本机的浏览器缓存中,所以重新开机后,这些保存的内容是不会丢失的,如果担心不小心清了缓存或其它的原因引起的丢失,建议自己备份一份。

    关于图片
    大家会看到,我拿图片链接的方法是先把图片上传到公众号中,然后在公众号的“素材管理”->”图片“中点击打开图片后,再右键图片,”复制图片的链接地址”,粘贴到markdown中的。你也可以把Md2All”复制”到公众号后,再插入图片。但这些方法相对来说是比较复杂的。

    因本人也写博客,我通常的做法是先在博客平台(如CSDN,简书)把markdown写好,上传好图片(上传图片时,markdown会自动包含了图片的链接),然后再把博客平台的整个markdown内容复制到Md2All排版,再一键 “复制” ,粘贴,粘贴……到各个平台。

    其实,对于大部分人来说,上面的视频就已能完美解决公众号用markdown来写作的问题了。但对我来说,这只是介绍Md2All的开始。自定义css样式功能如此强大,你能不往下看吗?

    初识css

    对于没学习过css的同学来说,一听到css就懵了,啥来的?
    简单地说,css就是渲染网页所用的样式。打开“一键排版”,看到里面的的内容就是当前渲染效果对应的css样式,不同的样式模板对应不同的css样式,所以就能渲染出不一样的效果。

    可能又有些同学看到css样式文件里那么多的内容,又懵了,不知从何下手。
    其实,在样式文件中,我已加了很多的注释,比如p {/*段落*/,另外,看到的h1,h2,......,h6为标题,分别对应markdown内容中的#,##,......,######

    举个例子来说,如果我想改###这个h3标题的效果,那就只要改样式文件中以h3为开头的样式的内容即可。如:

    h3 {
      font-size: 1.3em;
    }

    改为

    h3 {
      font-size: 2.3em;
      color:#159957
    }

    也可以直接在后面添加,后面的会覆盖前面的,如:

    h3 {
      font-size: 1.3em;
    }
    h3 {
      font-size: 2.3em;
      color:#159957
    }

    从上面的内容可以看到,font-size,color,这个不用解释大家都知到是什么意思了吧,而颜色大家会发现有时用的是如:color:rgb(248,35,117) ,而有时又用如color:#f82375,其实只不过是两种不同的表达罢了,其中rgb(248,35,117)分表为r、g、b对应的10进制数,和其16进制数:color:#f82375是对应的。
    因为Md2All中用的都是标准的css样式,如果有不清楚的,百度一下就ok了。

    你要知到的

    修改样式后,“保存”就能即时预览到效果。

    大家后面会看到,我的第一步是从”默认样式“中把整个样式内容复制到”最爱样式“中然后进行修改的,建议参考这个做法,因为所有的样式模板都是从”默认样式“中修修改改过来的,另外,其它的样式模板目前还有可能在不断改进中,所以在”最爱样式“中定义自己的样式是最好的。

    另外,各个样式模板相对”默认样式“改动的部分,我都用 红色 标出来,所以应该很容易就能看到改了那个地方,如果你喜欢某模板的标题样式,然后又喜欢另一模板的引用块样式,可以把相应的样式复制并整合到你“最爱样式”下,如有需要再加以修改就行了。

    好了,下面我就带着大家一步一步来介绍如何自定义css样式了。

    全局样式自定义

    这里写图片描述
    大家看到,修改output_wrapper{}下的样式后,就直接影响了整个文档的显示效果,而每个样式的修改会有什么效果,从英文单词和视频效果中已能很清楚地看到,所以不一一详细描述了。

    但细心的朋友可能会发现,不是说了全局的吗?但为什么最上面的引用块的样式没有变的?呵呵,再补充下:
    更具体定义的元素,无论放在前面还是后面,也不会被范围更大的定义覆盖,如:

    blockquote
    {
    color:#ffffff;
    }
    output_wrapper
    {
    color:#00000;
    }

    output_wrapper的color不会覆盖blockquote(引用块)的。原因是就就是output_wrapper是针对所有的,而blockquote只是针对引用块。
    好吧,既然说了引用块blockquote,那就接着blockquote{}来说吧!

    引用块样式自定义

    这里写图片描述
    有了上面的介绍后,这儿看起来应该没压力了吧,就是改blockquote{},说白了就是英语单词的事了。

    段落样式自定义

    段落

    粗体、斜体、删除线

    粗体
    大家看到,对于斜体em{},我把font-style:itaic拿掉就不斜,对于删除线del{},只要添加text-decoration:none;就会把删除线可掉,对于强调strong{}可以添加font-weight:normal;把粗体去掉。这样你就可以把它作为其它的作用了呵。

    分隔线样式自定义

    分隔线
    想不到分隔线也能做成这样的效果,对吧?

    行内代码样式自定义

    行内代码和代码块一般情况都是用于代码显示,不过行内代码是可以和其它的内容放在同一行的,所以有些同学也喜欢用行内代码来显示一些自己要突出的内容;而代码块,就是独立为显示一段代码的区域。
    这里写图片描述
    行内代码,也就是改code{}

    代码块样式自定义

    代码块
    看到这儿后,就算工具栏没了代码紧凑的功能,你也应该知到怎样实现了吧!
    另外,代码的高亮,你也可以随心所欲地定义了吧。

    标题样式自定义

    其实很多文章,大家都比较注意标题的样式,所以下面会发别从三个标题样式为例来进行练习。

    补充一下,markdown语法的#对应样式中的h1,##对应h2,……######对应h6,虽然对h1h6浏览器会有默认的font-size,但也是可以任意自定义的。

    大家看到我比较喜欢用h3,主要是因为,我写markdown时喜欢用通用的语法,也就是说,就算有些平台如:简书,不支持Md2All的渲染,但我可以把Markdown的内容复制到简书,用简书自带的markdown编辑器还是能渲染出它默认的效果的,而我喜欢h3作标题,就是因为h3默认的font-size对我来说,刚好。

    而Md2All对标题(h1……h6)进行了优化,以h3为例,我把h3{}作为整个标题的样式,而把h3 span{}作为文字内容的样式,说得有点听不懂,对吗?不用担心,通过下面的练习,你就知到了。

    标题酷酷的改进

    我看到大多数朋友喜欢用”标题酷酷“这个样式,其实这个样式是我自己瞎弄出来的,想不到有那么多同学喜欢,有点偷着乐:p,但后来想想,是不是样式太少,他们根本没得选?

    那好吧,自己来改一个吧。当然,我说的只是方法,大家知到方法后,怎样改就是自己个人喜欢的事了。好,直接来视频:
    标题 cool

    标题首字突出的改进

    标题首字突出
    大家看到,这个标题我用的不是h3,而是h1了,主要是想告诉大家,如果你一篇文章中,如果想同时有几种标题,可以用这种方法。当然这种方法也不是唯一的,但先到此为止了。

    标题上下边框的改进

    标题上下边框
    大家看到,这个我又变成用h1了,对吧。这些都是很灵活的。

    最后

    看到这儿,大家都知到怎样玩转Md2All的自定义了吧?是不是真的很简单呀 :p
    对于刚开始接触自定义css样式的同学,可能还是不太敢去改,“万一改错了呢?”,其实你一万个放心,就算改错也就是”恢复预设“值,再保存就ok了。


    “原文链接”的内容会持续更新呵。

    如有问题或建议,欢迎公众号留言呵。
    公众号不定时会有秘技的呵:p
    这里写图片描述

    展开全文
  • 关于Md2All Md2All的云图床效果 直接把图片拖到编辑框 截图,直接复制粘贴 点图片图标选择图片 注册七牛云帐号 新建七牛云存储空间 设置云图床 密钥AK和SK BucketName和BucketDomain 在Md2All中设置七牛图床 ...

    内容目录

    关于Md2All

    网址:http://md.aclickall.com
    Markdown排版利器,支持 “一键排版” 、自定义css、80多种代码高亮。
    能让Markdown内容,无需作任何调整就能一键复制到微信公众号、博客园、掘金、知乎、csdn、51cto、wordpress、hexo。。。等平台。
    Md2All完整教程请参考:https://www.cnblogs.com/garyyan/p/8329343.html

    Md2All的云图床效果

    直接把图片拖到编辑框


    会看到,支持多张图片,不用额外的处理,就直接生成相应的markdown和正确显示图片.
    注意:markdown内容是插入到光标处,为了避免不知内容插入到那儿,拖图片时,请先点一点光标。

    截图,直接复制粘贴

    点图片图标选择图片

    这个功能就不录视频了,相信聪明的你一定知到怎样做的。

    看起来,效果还不错,对吧!但在实现此功能前,先要进行下面的步骤.

    注册七牛云帐号

    为什么用七牛云?因为七牛云已相当成熟,并有很好的图片管理功能。
    如果没有七牛帐号,可通过我邀请的注册链接:https://portal.qiniu.com/signup?code=3lofzhrgjtr9u完成七牛云的注册,为什么用我的邀请?因为用我的邀请,我能得到七牛的一点点好处,是的,一点点。
    注册时,他会通过语音电话给你验证码的,不要把它当是骚扰电话给挂了^_^
    另外,注册时要你填一个网站域名,如果没网站的,就试试随便填一个存在的网站吧。
    注册后会发邮件到你邮箱,通过邮件激活,并登录。

    新建七牛云存储空间

    进七牛首页,选管理控制台

    对象存储


    然后新建存储空间

    现在七牛的新建存储空间要认证,建议用支付宝认证,我十分钟左右就收认证通过的信息了。认证认正通过后会有10G的免费空间,够用了吧 :P

    设置云图床

    密钥AK和SK

    BucketName和BucketDomain

    在Md2All中设置七牛图床

    在Md2All中点击左上角的图片图标,然后参考下面的1,2,3,4和上图的1,2,3,4对应,并记得保存设置

    七牛的云图床管理

    进七牛首页,选管理控制台,然后根据下图

    大家会看到,前面演示的Md2All上传的图片都会在七牛云的的存储空间上看得到,可进行相应的管理。
    OK,轻松搞掂。

    欢迎关注

    如有问题或建议,公众号反馈
    大少公众号

    展开全文
  • 公众号的Markdown排版利器:Md2All

    千次阅读 2018-01-08 17:24:34
    本文所用排版工具:Md2All,http://md.aclickall.com 公众号排版工具 公众号的排版编辑工具还真的不少,但功能大同小异,大部分是针对富文本的排版,更多的是偏重素材,及各种花巧的样式,给人一种眼花缭乱的感觉...
  • 那在Md2All之前,如果想在公众号上显示Latex公式应该怎么办呢? 最通常的做法就是在某个支持Latex公式的网站(如CSDN)先把Latex公式显示出来,然后再一个个截屏到公众号。如果一两条公式就算了,如果公式很多,那...
  • 2.所有元素自定义CSS样式 3.图片自动上传图床 4.LaTeX公式自动转化图片 5.其他 总结 简介 markdown以简单的语法和强大的功能,征服了无数技术创作者,几乎主流的技术博客网站都开始支持markdown语言撰写...
  • 如果您还没有bgc_md2仓库,请执行以下操作: git clone --recurse-submodules https://github.com/MPIBGC-TEE/bgc_md2.git 如果您已经有一个bgc_md2仓库(并希望保留它): 同时拉出bgc_md2和子模块中的更改: git ...
  • CTF中的md5(ALL_IN_ONE 2020.11.20更新)

    万次阅读 2020-11-20 17:32:23
    文章目录第一种情况,md5弱类型比较第二种情况,md5强类型比较第三种情况,md5碰撞第四种情况,sql语句md5值暴破其他特殊的hash值(md4、crc32......) 第一种情况,md5弱类型比较 if(md5($_GET['a'])==md5($_GET['b']...
  • MD5.Checksum.Verifier.v5.6.WinAll.Incl.Keygen-FALLEN
  • MD2 文件格式详解

    千次阅读 2012-08-29 16:15:14
    准备学习3d游戏,还不清楚md2格式,转载这篇文章,与大家共享。 原文地址:http://tfc.duke.free.fr/old/models/md2.htm   The Quake II's MD2 file format written by David Henry, december 21st of ...
  • MD2关键帧动画

    千次阅读 2007-06-04 01:00:00
    本想用骨骼动画的,无奈.x格式的太过于复杂,而且游戏业里也不怎么用。只是把它的原理弄明白一些了,但是,我弱小的意志在DirectX SDK那个1000...确定文件格式:md2(正好连找都不用找了,老师给了)以下是我Copy的:
  • blog2md 将您的博客文章翻译为降价文件! (现在支持 ) 如何使用 import blog2md my_blog = blog2md . Blog ( "http://blog.csdn.net/synapse7/article/list/" , entry_tag = 'span' , entry_class = 'link_...
  • 2.相同数据表,来至不同数据源的UNION数据统计。 3.有时候利用union可以解决一些奇怪的判断语句.比如将报表的合计一起返回 4.之前使用的例子,有多个信息模块的数据,需要展示,每个模块表都有一个title,id,...
  • MD5

    千次阅读 2017-09-14 09:58:53
    MD5MD5讯息摘要演算法(英语:MD5 Message-Digest Algorithm),一种被广泛使用的密码杂凑函数,可以产生出一个128位元(16位元组)的散列值(hash value),用于确保信息传输完整一致。MD5由罗纳德·李维斯特设计,...
  • md5加密

    千次阅读 2017-05-17 13:00:53
    md5加密
  • MD5加密

    千次阅读 2014-12-30 09:42:26
     首先,先简单介绍一下MD5 MD5的全称是message-digest algorithm 5(信息-摘要算法,在90年代初由... rivest开发出来, 经md2md3和md4发展而来。 MD5具有很好的安全性(因为它具有不可逆的特征,加过密的密文经过

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 179,206
精华内容 71,682
关键字:

md2all