Git Product home page Git Product logo

markdown-css's Introduction

makrdown-css

pypi

Markdown css is a command tool to convert css style into markdown inline style.

中文文档 演示

Theme Demo

apollo.css

ocean.css

simple.css

style.css

typing.css

xiaolai.css

Install

maxOS

xcode-select --install
pip install markdown-css

linux

apt-get install libxml2-dev libxslt1-dev python-dev
apt-get install python-lxml
pip install markdown-css

Getting started

pip install markdown-css
mkdir public
touch style.css
markdown -h
markdown-css markdown.html --style=style.css --out=public

Themes

https://github.com/wecatch/markdown-css/tree/master/themes

Demo

git clone https://github.com/wecatch/markdown-css.git
cd themes
markdown-css markdown.html --style=simple.css --out=public

Selector

markdown-css support css selector like these:

element selector

p {
    margin: 10px 0;
}

multi element selector

h1,p,h2,pre {
    color: #333;
}

all element

* {
    font-size: 14px
}

pseudo-selector

h1:before {
    content: '#'
}

child element seletor

blockquote p {
    color:#888;
}

Pseudo-selector can't be used in inline-style, these selectos are write into <style> tag

中文介绍

markdown-css 是一个命令行工具用来为无 CSS 的 html 文档添加 CSS,渲染之后的 html 可以直接粘贴在微信公众号使用。

要使用 markdown-css ,通常你需要一款类似 typora 的编辑器,用 markdown 完成写作之后导出为不带任何 style 的 html 文档:

然后再需要提供一个主题样式,仓库里已经有了一些主题样式可以使用,用以下命令完成转换:

markdown-css markdown.html --style=style.css --out=public

渲染之后的文档会导出在同目录下的 public 中,用 Chrome 浏览器打开渲染之后的同名文档,复制粘贴到微信公众号编辑器即可。

注意: 由于微信公众号对 ul 和 ol 进行了转换,markdown-css 针对这两种标签进行了特殊处理,并且提供了 render 参数来选择是否要特殊处理 ul 和 ol,默认情况为是,可以根据自己的需要不特殊处理 ul 和 ol,只要 render 不等于 wechat 即可。

markdown-css's People

Contributors

flyfloor avatar zhyq0826 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

markdown-css's Issues

lxml.etree.XMLSyntaxError: None

markdown-css test.html --style=style.css --out=public
Traceback (most recent call last):
File "/usr/local/bin/markdown-css", line 72, in
main(input_file, out, style, name)
File "/usr/local/bin/markdown-css", line 30, in main
html = PyQuery(content)
File "/usr/local/lib/python2.7/dist-packages/pyquery/pyquery.py", line 226, in init
elements = fromstring(context, self.parser)
File "/usr/local/lib/python2.7/dist-packages/pyquery/pyquery.py", line 70, in fromstring
result = getattr(lxml.html, meth)(context)
File "/usr/lib/python2.7/dist-packages/lxml/html/init.py", line 704, in fromstring
doc = document_fromstring(html, parser=parser, base_url=base_url, **kw)
File "/usr/lib/python2.7/dist-packages/lxml/html/init.py", line 600, in document_fromstring
value = etree.fromstring(html, parser, **kw)
File "lxml.etree.pyx", line 3032, in lxml.etree.fromstring (src/lxml/lxml.etree.c:68106)
File "parser.pxi", line 1785, in lxml.etree._parseMemoryDocument (src/lxml/lxml.etree.c:102455)
File "parser.pxi", line 1666, in lxml.etree._parseDoc (src/lxml/lxml.etree.c:101214)
File "parser.pxi", line 1035, in lxml.etree._BaseParser._parseUnicodeDoc (src/lxml/lxml.etree.c:96124
)
File "parser.pxi", line 582, in lxml.etree._ParserContext._handleParseResultDoc (src/lxml/lxml.etree.
c:91275)
File "parser.pxi", line 683, in lxml.etree._handleParseResult (src/lxml/lxml.etree.c:92461)
File "parser.pxi", line 633, in lxml.etree._raiseParseError (src/lxml/lxml.etree.c:91924)
lxml.etree.XMLSyntaxError: None

Pseudo Class can't copy to WeChat Edit

I use markdown-css, and I found the html is appear well, but when I copy the html into Wechat Edit, all the Pseudo Class is disappear.
Is there any solution?

docopt get default value is None

 File "/Users/zhyq0826/workspace/python_dev/lib/python2.7/genericpath.py", line 49, in isdir
    st = os.stat(s)
TypeError: coercing to Unicode: need string or buffer, NoneType found

Chrome 浏览器复制文章内容到微信公众号编辑器带上了字体

用 Chrome 最新的浏览器打开 markdown-css 生成的 html ,如果 css 不指定任何字体,也就是没有 font-family,复制到微信编辑器之后会内联 css 会带上 font-family: "PingFang SC" ,由于微信公众号没有这个字体,微信会把 css 样式去掉,格式会乱,解决方法是

  1. 换用其他浏览器,mac 上 Safari 可以
  2. css 中指定 font-family,但字体一定要在微信自带的浏览器中存在

pip已失效

感谢工具
pip安装已经无效了,最后从源码装的

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.