Sublime Text下使用markdown的环境搭建和配置

December 15th, 2016, Posted by: agon   

试了一堆markdown线上或客户端编写工具,感觉都不顺手,最后还是决定用sublime text,搭建环境最终效果为,sublime下编辑markdown,并在浏览器端显示最终效果。浏览器里显示效果最好的是Markdown Preview,各种特性完美转换,基本不需要单独配置,推荐新手用。1

前提及环境

只要会Package Control安装插件就行了,系统环境为windows10,sublime text版本为3。

插件安装

Markdown Editing的安装

Sublime下写markdown必备插件,主要功能是为Markdown and MultiMarkdown提供inline formatting(源文件内显示加粗、标题、引用等风格)、关键字的自动补齐和闭合,另外还有一些有用的的快捷方式(例如control+1为标题1),这些为markdown的编写省去不少时间。2

Markdown Preview的安装

通过Markdown Preview的安装我们可以在浏览器里看到最终显示效果,或者导出html到文件所在文件夹(ctrl+b),还可以通过配置自己css模板,看到在自己网站下浏览的最终效果。还有一个优点就是转出的html比较干净整洁,和自己网站上的css好搭。3这个插件有几个好处:支持的扩展全;支持MultiMarkdown的扩展语法,例如在生成的html元素里添加自定义的id或者class;同时也有几个比较好用的命令。4
自定义快捷建:如果我们想要直接在浏览器中预览效果的话,可以自定义快捷键:点击Preferences -> Key Bindings,添加以下代码:


    "keys": ["alt+m"], "command": "markdown_preview", "args": { "target": "browser"},

alt+m在浏览器里查看浏览最终效果。

  • 一些简单的配置:设置语法高亮和mathjax支持
    同样点击Preferences ->Package Settings->Markdown Preview->Setting-user

    /*
    需要数学公式的这个改为true
    */
    "enable_mathjax": true,
    
    /* 
     如果需要看代码高亮效果这个改为true,但是生成的html code很乱,如果你需要转出干净的html,发布网站上有自定的高亮模板,直接改为false
    */
    "enable_highlight": false,
    

Live Reload的安装和设置

这个插件的作用是,当你保存markdown文件的时候,浏览器会跟着更新效果,注意是 先保存文件。如果保存后浏览器不会自动更新,需要再设置一下,按快捷键Control+Shift+P,输入livereload,会看到LiveReload:enable/disable plugins,选择enable-Simple Reload,需要注意的是,每次都关闭打开sublime都要重复上述enable操作。

源文件内语法高亮

需要个漂亮的主题敲起字来才心情舒畅,默认的markdown editing的主题实在是难看,并且代码段也不会高亮,看起来很不直观,顺便推荐一个主题插件,__Monokai Extended Package__,Package Control搜索’Monokai’安装。然后依次点开下图的三个配置文件:
设置主题
全都添加Monokai Extended的主题,并把你的文件mardown文件后缀都改成mmd。

    "color_scheme": "Packages/Monokai Extended/Monokai Extended.tmTheme",
    "line_numbers": true
}

高亮效果如下图:
高亮效果

实时预览方案

经过上面的简单安装和配置你就可以愉快的在SublimeText下写东西了,如果你嫌手动保存实在麻烦,或者文章太长需要实时看一下效果,可以尝试一下下面两个方案。

OmniMarkupPreviewer

这个插件不像上面那个需要手动再选择,实时预览,我之所以没用这个,是因为好些扩展没有Markdown Preview支持的全,比如tasklist格式转成html代码不好看,部分扩展在配置里打开时会报错比如tstrikeout(开启会报错),还有就是转出的html代码比较整洁。可以参考脚注里的链接。另外如果以后熟悉markdown了就不用老看最终效果,很少会实时预览了。需要配置的请看脚注5

markmon

这个插件需要额外安装node.js、pandoc,利用pandoc生成的html在浏览器里实现实时预览,效果还不错,有评价pandoc才是markdown界最高逼格的,但是在默认命令里生成的html里,我需要的几个功能,解析出的结果都不太满意,例如页脚部分引用没有解释成超链接,不支持添加自定义元素的id和class,可能是我还没学pandoc,命令不会使。对pndoc比较熟悉的人,这个应该是最棒的方案。安装方法参考下面两个链接:
点这里,按流程装完在配置文件里加上"executable": "markmon.cmd"就可以了。

  1. InstallPandoc
  2. Install Node.js.
  3. cmd下运行命令npm install -g markmon
  4. Install SublimeText插件markmon.
  5. 在用户配置文件Preferences->Package Settings->Markmon->Settings,填上这个{ "executable": "markmon.cmd", },这个是windows用户需要添加的,否则会报错
  6. 重启SublimeText 并运行工具点击Tools->Markmon->Launch,打开markmon
  7. 配置自己的需求,默认用的域名是127.0.0.1,你可以配置成自己想要的域名,任何访问这个地址的都可以实时预览,还是在第5步用户配置文件里的逗号后面添加上下面下面的markmon配置:
        //开启的端口,你自己服务器设置的多少就开哪个
        "port": 3002,
        //pandoc的路径,安装的时候已经添加到环境变量里了,如果你的没有,添加pandoc安装路径在这里
        "pandoc_path": "",
        //markmon好像不像makdown preview那么多自定义,其实他使用pandoc来实现的,前提是你得学会pandoc的相关命令,从而实现加载自己的html模板、css、js和相关扩展,
        "command": "pandoc -t HTML5 --mathjax",
        //这个应该是加载自己的stylesheet吧,没尝试
        "stylesheet": null,
        //这个会在pandoc生成命令里添加project位置,就是本地文件相对路径的那个文件夹
        "projectdir": null
    

有具体需要的,可以学习pandoc的相关命令。
效果如下图:
markmon实时效果预览

进阶配置

上面的安装设置做完之后,已经可以开始写了。等慢慢熟悉了markdown,有进一步需求可以再进一步配置,满足自己的需求。详细的配置和源码可以去 发布页面

Markdown Preview的设置

自定义生成的html文件路径

修改用户配置文件里的’path_tempfile’,为你自定义的文件见,方便查找生成的html文件,以及后期加载自定义css、js、本地路径图片,例如"path_tempfile": "./",就可以在mark文件所在文件夹下,生成对应的html文件,访问相对路径下的加载文件。

添加自定义的css和模板

加载自己的css和html模板,以期转出的html和自己网站风格兼容,同时也可以添加方便的侧边栏,方便预览:
自定义出题
涉及到下面的几个变量,在菜单里打开用户配置文件,把默认文件里的几个配置粘进来:
打开用户配置和默认配置文件
修改下面几个选项

/*
    这个是加载默认的css,如果自定义的话,把它放进注释里里面    
    "css": ["default"],
*/


//生成的临时html文件位置
"path_tempfile": "E:\\我的模板",
/*
   这里定义html模板的位置,html模板很简单,就是一个html文件,哪里放上{{ BODY }}这个标签,哪里就会被文章对应html替换。
   {{ HEAD }} 这个标签意义不大,替换默认生成的head,既然自定义,肯定在自己的html文件里写自己的head。
   后面的路径换成你自己的模板文件路径,注意如果模板里使用相对路径的js和css文件,保持html_template和path_tempfile在同一个文件
*/
"html_template": "E:\\我的模板\\模板.html",
//跳过默认的模板,加载自定义模板改为true
"skip_default_stylesheet": true,
//导出干净的html源文件,没有自定义的额为的html和css标记,部分扩展增加的标记可能会出问题。还是自己写个脚本来复制带扩展的html。
`"html_simple": false`

到此我们就完成了自定义html模板了。

关于扩展的设置

这个插件的好处是扩展全,但是有些扩展可能是我们不需要的,举个例子HeaderAnchor,他会网h标签里插入一大堆东西,如果你自己网站没有对应的css,实现相应功能,就没必要实现这个扩展。除了不含HeaderAnchor,把所有扩展都写出来了,你可以根据自己需要来增减。

    "enabled_extensions": ["extra", "toc", "meta", "sane_lists", "smarty", "wikilinks","magiclink", "delete", "tasklist", "githubemoji",  "superfences", "nl2br"],

    "guess_language": false,

Markdown Editing的设置

Markdown Editing有三种格式的设置文件,对应markdown的三个版本,其中GTM为githubmarkdown的缩写,那两个分别是标准版,一个扩展版。7通过对后缀名的识别,来判断应用哪个配置文件。除了上面高亮代码部分把主题添加到用户配置里,还要把你想配对的后缀添加到配置里,推荐个比较暴力的方法,因为MultiMarkdown的支持的扩展最多,把所有markdown文件后缀都识别成MultiMarkdown格式,打开MultiMarkdown配置添加下面的代码,同时删除其他用户配置里的extensions。

"extensions":
    [
        "mmd",
        "mdown",
        "txt",
        "md",
    ],

Markdown Editing的常用快捷键,及自定义常用快捷键

  • alt+b粗体;alt+i斜体;
  • ctl+1~6对应H1~H6标题;
  • mdc+Tab添加代码段,按tab切换位置
  • mdl+Tab添加链接;mdi+Tab添加图片
  • Win+Ctrl+v,创建格式为[]()的链接,更快的流程是,复制链接,然后按这个快捷键,链接已经在括号里了,光标留在方括号写文字描述。
  • Ctrl+Alt+g,引用间跳转,鼠标放在引用的方括号里,按快捷键,在文末和文中的位置互相跳转。
  • ……

tips

其他需要补充的常用的小窍门

常见问题

  • 无法更改markdown editing安装后的默认主题:6默认非常难看,一片灰白,就是在菜单栏和用户配置文件
    里,添加上Monokai Extended的主题,也还是没有改变,除了markdown文件的主题以外,别的文件格式都正常。可能是markdown文件后缀没有被认成正确的格式,没有对应markdown editing的主题。首先确保在上面安装主题的步骤里,每个对应的配置里,都是Monokai的主题,,然后在显示不正常的markdown文件下,点View -> Syntax -> open all with current extension as,选择Markdown Editing -> MultiMarkdown这样就和你sublime里设置的主题一样了。如果还不一样,在Preferences -> Settings-Syntax Specific,配置文件里添加如下代码:

    {
        "color_scheme": "Packages/Monokai Extended/Monokai Extended.tmTheme",
        "line_numbers": true,
    }
    

    如果你做了上述一切还是不行,尝试下改个markdown文件后缀,改成’.mmd’,这个后缀主题支持的最好,文件内代码高亮都很清楚一致。

资源教程整理

又一年

December 31st, 2014, Posted by: agon   

又一个年头,blog荒废了一年。就连这篇也是过年时draft里的标题,又一年好像是迈克·李里的一部电影,好像当时要看,到现在也没看。

每年年末都要总结一年,希冀来年。对自己来说把目标写出来,就是为了在总结的时候,验证它不会实现,又或者自己压根就没什么目标,浑浑噩噩中度日。

没有强大的内心,懦弱的自我与现实来回撕扯,原地扭捏,气喘吁吁。

生命依然还要继续,追问它依然是一片虚无,可是每晚依旧能安然入眠,然后早早醒来,瑟瑟地等待窗外的光亮。

自己的生日正是元旦,每年的开始便又老一岁。

又想起了鲁迅的《希望》,“我的头发已经苍白,不是很明白的事么?我的手颤抖着,不是很明白的事么?那么我的灵魂的手一定也颤抖着,头发也一定苍白了。”,不知自己能否能寻到我的灵魂,即便寻到,想必也衰败的一塌糊涂。

不知青春为何物,直接从少年变成老年。

此刻,“没有爱憎,没有哀乐,也没有颜色和声音”。

恐惧吞噬灵魂。

也许,有“身外的青春”,它在哪里蜷缩在哪个黑暗的边角里,等待着,来年也许……

又被蛊惑了。

哦,有声音,贴首曲吧
Max Richter – Beginning and Ending

Django添加自定义TEMPLATE_CONTEXT_PROCESSOR

October 27th, 2013, Posted by: agon   

看到the django book第九章里关于template_context_processor,有些内容太老,也没有给出自定义template_context_processor实例,所以写了一个总结。

创建一个context processor函数

新建一个文件命名为context_processors.py,把它和项目的settings文件放在一个文件夹内,添加一个返回字典的函数,其代码如下:

#context_processors.py
def foos(request): 
    context = {'FOO': 'context processor test:foos'}
    return context

修改 settings 文件

打开项目的settings.py文件,添加如下代码:

#settings.py【1】
#这里用import,目的是为了不修改global_settings文件,只修改本地配置文件
from django.conf import global_settings

#添加自定义的处理函数
TEMPLATE_CONTEXT_PROCESSORS = global_settings.TEMPLATE_CONTEXT_PROCESSORS + ( "mysite.context_processors.foos", )

说一下上面的代码,+后面的元组可以添加多个自定义的处理函数,如果只有一个别忘了后面的逗号。

在views中调用

views中函数的return有两种写法,一种是render,一种是render_to_response,这里推荐render而不是render_to_response【2】,因为render_to_response必须要使用这个参数context_instance=RequestContext(request)才能使用默认的template_context_processors。

模板中添加自定义的变量

在要测试的模板里添加{{FOO}},访问的时候就会变成我们赋予其的值了。

由于在TEMPLATE_CONTEXT_PROCESSORS添加的函数在settings里,即使你不调用它,所有的views都自动调用它,可能会带来性能影响,请酌情使用【3】

windows64位下python3配合apache与wsgi部署django项目

October 26th, 2013, Posted by: agon   

初学django,想在windows下,用apache和mod_wsgi部署一个简单的django学习环境,没想到由于操作系统用的是win8 64位和python3,安装的并不顺利,本文即对安装过程的总结。

搭建环境及准备

  • 操作系统;win8.1 64位
  • python版本:pyton3.3.2 64位
  • django版本:django-1.5.4
  • 准备一个可以runserver下正常用的django project

注意上面python安装的版本是64位的。

安装apache

这里需要安装apche64位版本,否则wsgi会不认,无法加载,造成apche无法启动。可以直接到awamp下载一个套件,或者到aapachelounge下载已经编译好的单独的64位apache,本文的apache版本是2.4.4。wamp正常的安装就可以了,apachelounge的应该是绿色版的。

安装mod_wsgi

官方最新的版本是3.4,只有python2.6和2.7的,没有python3的。我们不用自己编译(在windows下几乎没有编译成功过),有现成的,到http://www.lfd.uci.edu/下载需要的版本(这里有很多windows下的编译好的扩展),根据本文环境选择mod_wsgi-3.4.ap24.win32-py3.3.zip,之后搭建成功后,访问网页,得到的http头里的server显示是mod_wsgi/3.5-BRANC。

解压压缩包,把mod_wsgi.so文件拷进apache安装路径的modules文件夹下,打开httpd.conf,添加一行LoadModule wsgi_module modules/mod_wsgi.so。cmd命令行窗口,执行apache的bin目录下的httpd,如果没有任何报错,应该就正常加载了。

部署django项目

假设你用django-admin.py startproject mysite,创建一个mysite的项目,它的目录结构如下:

项目目录结构

假设你的项目在D盘根目录,我们就此来配置项目。

添加程序入口文件

在mysite项目根目录,新建apche目录,这个目录在manage.py那个文件所在的目录,在其下面新建django.wsgi,将来WSGI连接它来代替默认的mange.py,作为网站的入口配置。在其内添加如下代码:

import os
import sys

#添加setting文件地址
os.environ['DJANGO_SETTINGS_MODULE'] = 'mysite.settings'
#添加项目路径到sys.path
sys.path.append('D:/mysite')
 
import django.core.handlers.wsgi
application = django.core.handlers.wsgi.WSGIHandler()

上面的代码只修改为你项目的地址和对应名称,后面conf配置的时候用到这个文件的地址。

配置虚拟主机

因为可能同时要运行多个项目,而且还有其他语言的项目,所以用vhost来配置是最方便的。到apache安装目录的conf\extra里找到httpd-vhosts.conf文件,这个文件是虚拟主机的配置文件【1】,编辑打开,贴入如下代码:

#如果是80端口这句不用写,主配置文件httpd.conf已经有了
#Listen 80 
#这句貌似也不用,2.4的不需要这句
#NameVirtualHost *:80 

#配置端口号,*可以换成主机ip,如果ip不固定,就有*就好了,很方便
<VirtualHost *:80> 
	#配置访问的域名
	ServerName example.com
	#配置主目录权限
	<Directory />
	    Options FollowSymLinks 
	    AllowOverride 
	    Order allow,deny 
	    Allow from all 
	</Directory>

	#配置项目配置文件目录权限,禁止访问
	<Directory "D:/mysite/mysite/"> 
	    Order Deny,Allow 
	    Deny from all 
	</Directory> 

	#关键一句配置项目入口点
	WSGIScriptAlias / "D:/mysite/apache/django.wsgi"

	#配置管理员静态文件目录,及其权限
	Alias /static/admin D:/Python33/Lib/site-packages/django-1.5.4-py3.3.egg/django/contrib/admin/static/admin
	<Directory "D:/Python33/Lib/site-packages/django-1.5.4-py3.3.egg/django/contrib/admin/static/admin/"> 
	    Order allow,deny 
	    Allow from all 
	</Directory> 

	#配置静态文件目录,及其权限
	Alias /static D:/mysite/static/
	<Directory "D:/mysite/static/"> 
	    Order allow,deny 
	    Allow from all 
	</Directory> 

</VirtualHost>

下面说一说上面代码里应该注意的地方:

  • 首先,项目结构如前面图片,假设保存在D盘,前面几句是主机地址、域名以及涉及目录权限的相关设置,到达WSGIScriptAlias这里,就填上刚才添加的django.wsgi的地址,这里是配置成功与否的关键。
  • 凡是不想让wsgi处理,按实际文件夹结构访问的,都可以用Alias来添加,这样访问的时候就不会去找urls里配view了。添加的时候注意Alias第一个目录后面不要用/结尾。 【2】 本例以static目录为静态文件夹
  • 本例使用static为静态文件目录,因为django1.5的admin的静态文件地址为域名/stacic/admin/*。另外注意的是django1.5不在使用media文件存放静态文件,改为contrib/admin/static/admin了。如果你想把其他静态文件也放在static下面,记住Alias /static一定要在Alias /static/admin后面,要不然由于优先级造成短路,登陆admin的时候,admin的静态文件永远也不会加载的。
  • 最后到编辑httpd.conf文件,取消Include conf/extra/httpd-vhosts.conf的注释,并保存。

至此,部署完成,当然这只是windows下用python3学django的一个学习环境,仅供学习用。另外,wsgi有两种运行模式:一种是daemon mode,一种是embedded mode。在daemon mode下,每次修改不用重启apche,windows下不支持,修改完代码只能重启apche,还有就是不要忘了吧settings.py里的ALLOWED_HOSTS填上你的域名。

python3.3下实现django连接mysql

October 20th, 2013, Posted by: agon   

想了解一下django,发现虽然django最新版已经支持python3,但是dajango用来连接mysql的mysqldb,却支持python2.7。虽然有很多支持python3的mysql连接器,但是dajango不支持。好在9月份,mysql官方连接器的一个beta版,已经有支持dajango的模块了,使用它就可以在python3和django1.5环境下使用mysql了。

搭建环境

  • 操作系统;win8
  • python版本:pyton3.3
  • django版本:django-1.5.4
  • mysql版本: 5.6.11 MySQL Community Server (GPL)

请确保以上涉及到的软件都正常工作。

安装mysql连接器(Connector/Python)

下载安装文件:

官方下载 最新版的稳定版连接器和alpha版,两个都下载,或者直接点以下两个链接:
alpha版 稳定版

我用的是windows,linux环境的也有提供,请点上面官方页面,注意那个页面默认看的是Generally Available (GA) Releases,点它旁边的Development Releases才能看到alpha版下载信息。

安装下载文件:

之所以下两个版本,请看后面的常见问题。

  1. 安装alpha版,然后到\Lib\site-packages\mysql\connector安装目录下找到version.py,复制一份。
  2. 安装稳定版,同样在这个目录下删掉version.py,把复制的那一份改成这个名字。
  3. 编辑Lib\site-packages\mysql\connector\django目录下base.py,在第278行找到return cursor.statement.decode('utf-8')修改为return cursor

设置与测试:

在你django的project里打开seetyong.py,按照下面设置:【1】

DATABASES = {
    'default': {
        'ENGINE': 'mysql.connector.django', # 这里是关键填我们装的backend.
        'NAME': '填你的数据库名字',                      
        'USER': '用户名',
        'PASSWORD': '密码',
        'HOST': '', 
        'PORT': '端口号', 
    }
}

上面填好之后,在project的manage.py目录,打开命令行工具,运行python manage.py shell命令,如果进入shell环境,参考下面的命令来测试:

>>> from django.db import connection
>>> cursor = connection.cursor()

上面两行如果没错,说明数据库设置正常,连接器配置成功

>>> cursor.execute("select * from books_publisher")
>>> cursor.fetchone()

把上面的books_publisher换成你数据库里有数据的表名,如果fetchone()执行完,有数据返回说明连接器基本没什么问题,可以用于一般的学习了

安装期间及测试出现的问题及解决

  • 只安装alpha版,在数据库关闭连接时老是蹦出异常:

    刚开始时只安装了alpha版,发现在执行完一般的mysql脚本好老是蹦出异常,type错误好像是,即连接器close()关闭连接后,connection.py在执行__del__报错。而稳定版没问题,由于稳定版没有django模块,所以先装alpha版后增加django模块,再装稳定版,覆盖alpha的其他文件成稳定版的。

  • 在执行python manage.py shell时找不到version:

    这就是前面为什么要复制一分alpha版的version.py文件,因为稳定版的版本号会提示错误,里面知识版本号数字,替换不影响使用。

  • 在执行cursor.execute来selct数据库时提示编码错误:

    在从数据库里取数据时会提示以下错误:
    return cursor.statement.decode('utf-8')
    AttributeError: 'str' object has no attribute 'decode'

    修改方法如前文安装所述sup【2】

经过一番折腾,做了一个小实例,没发现什么问题,在学习环境中使用很方便,其实用postgresql可能更方便了。眼下随着支持python3的插件越来越多,觉得用python3学django正是时候。

Page 1 of 2612345...1020...Last »