Markdown.css款式简介

日期:2021-01-20 类型:科技新闻 

关键词:抠图软件电脑版,在线图片加水印,在线 抠图,在线画图网站,淘宝做图片用什么软件好

Markdown.css 是1个很成心思的 CSS 款式表。它可让 HTML 显示信息成相近 Markdown 纯文字的方式。

根据 LESS 撰写

Markdown.css 根据 LESS 撰写,源码在此。

下面扼要地分析1下实际完成的方式。
题目

markdown 的题目在前再加 # 到 ###### 表明。这是用了 CSS 的伪类 :before 完成,比如 h2 是这么界定的:

CSS Code拷贝內容到剪贴板
  1. h2:before {   
  2.   content"## ";   
  3.   displayinline;   
  4. }  

强调

强调是前后左右再加*,因而除 :before 以外还用到了 :after。

CSS Code拷贝內容到剪贴板
  1. @em-char: "*";   
  2. em:before, em:after {   
  3.   content: @em-char;   
  4.   displayinline;   
  5. }  

strong、code的完成相近。
连接

Markdown 中的连接选用 [text](link) 的文件格式,完成和上面的强调的做法相近,最先去掉文字的装饰设计,随后应用 :before 在前面加上 [:

CSS Code拷贝內容到剪贴板
  1. a {   
  2.   text-decorationnone;   
  3. }   
  4. a:before {   
  5.   content"[";   
  6.   displayinline;   
  7.   color: @color;   
  8. }  

后边加上的內容中包括连接,能够根据 attr(href) 获得:

CSS Code拷贝內容到剪贴板
  1. a:after {   
  2.   content: ~'"](" attr(href) ")"';   
  3.   displayinline;   
  4.   color: @color;   
  5. }  

pre

pre 的话,很简易,要是左侧缩进4个标识符便可。针对适用缩进4个标识符的访问器,应用4ch便可,不适用的访问器那就应用34px。

CSS Code拷贝內容到剪贴板
  1. @four-space: 34px;   
  2. @four-space-css3: ~"4ch";    
  3. pre {   
  4.   margin-left: @four-space;   
  5.   padding-left: @four-space-css3;   
  6. }  

引入

Markdown 中的引入选用以下文件格式:

> 这是1个引入
> 引入的第2行

因而,选用的方式是在引入后加上>和 \A (换行),随后调剂部位,使其与原文“对齐”,并掩藏过剩的>。

CSS Code拷贝內容到剪贴板
  1. blockquote {   
  2.   positionrelative;   
  3.   padding-left: @four-space/2;   
  4.   padding-left: @two-space-css3;   
  5.   overflowhidden;   
  6.   
  7.   &:after {   
  8.       // 100 lines max   
  9.       // the \A becomes a newline character and `whitewhite-spacepre`   
  10.       // makes it act like a <br>   
  11.       content">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>";   
  12.       whitewhite-spacepre;   
  13.       positionabsolute;   
  14.       top: 0;   
  15.       left: 0;   
  16.       font-size: @font-size;   
  17.       line-height: @line-height;   
  18.   }   
  19. }  

照片

应用以下 CSS 能够完成照片变为 markdown 方式显示信息:

CSS Code拷贝內容到剪贴板
  1. img { content"" }    
  2.   
  3. img:before {   
  4.  content"![";   
  5.  color#333333;   
  6. }   
  7.   
  8. img:after {   
  9.  content"](" attr(src")";   
  10.  color#333333;   
  11. }  

markdownify

也有1个 markdownify 的 bookmarklet,将其储存在书签栏以后,能够将随意网站变为 Markdown 款式。


CSS Code拷贝內容到剪贴板
  1. $('link[rel=stylesheet]').add('style').remove();   
  2. $('[style]').attr('style''');   
  3. $('head').append('<link rel="stylesheet" href="http://mrcoles.com/media/test/markdown-css/markdown.css" type="text/css" />');   
  4. $('body').addClass('markdown').css({width'600px'margin'2em auto''word-wrap''break-word'});   
  5. $('a img').css({'max-height''1em''max-width''1em'});  

 

上一篇:爆品h5游戏都是有什么类似的地方 返回下一篇:没有了