百度知道搜索_mou markdown代码高亮收藏，2.1k 浏览
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
采用了和segmentfault同样的pagedown编辑器，我现在希望在插入代码时，能做到像segmentfault那样的实时高亮。
首先，给出我的html代码：
&div style="padding-top:5" class="control-group"&
&div class="controls"&
&div id="wmd-button-bar"&&/div&
&textarea class="wmd-input" name="content" id="wmd-input"&&/textarea&
&div style="padding-top:20" class="control-group"&
&div class="controls"&
&div id="wmd-preview" class="wmd-preview question-preview"&&/div&
上面的wmd-input是输入界面，下面的wmd-preview是预览界面
我希望在输入界面输入代码时，预览界面能实时高亮，我用的是highlight.js开源代码高亮插件：
我的想法是，监听wmd-preview的变化，当它的内容发生变化时，调用hightlight.js的高亮方法，代码如下：
&script type="text/javascript"&
var preview = $('#wmd-preview');
preview.bind('DOMNodeInserted',
function(e) {
$('pre code').each(function(i, e) {hljs.highlightBlock(e)});
现在的问题是，我输入代码的时候，经常会造成页面未响应，请问下这是什么原因？是否因为我这个方法的性能太差，有没有性能更好的方法？求指点，谢谢！
这个问题已被关闭，原因：
这个问题已经被关闭无法回答
分享到微博？
与我们一起探索更多的未知
专业的开发者技术社区，为用户提供多样化的线上知识交流，丰富的线下活动及给力的工作机会
加入只需一步
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
举报理由：
推广（招聘、广告、SEO 等）方面的内容
带有人身攻击、辱骂、仇恨等违反条款的内容
与已有问题重复（请编辑该提问指向已有相同问题）
不友善内容
答非所问，不符合答题要求
其他原因（请补充说明）
补充说明：
扫扫下载 App
SegmentFault
一起探索更多未知多说,markdown和代码高亮
在Django1.5版本前是有内置的评论系统的, 不过现在已经放弃使用了, 在国内比较常用的是多说, 在国外是disqus, 因为文章主要面对 国内用户, 所以采用
在网站上注册账号或者直接用社交账号进行登录,并会生成一个short_name, 可以在个人界面中的工具中找到一段通用代码, 这段代码非常重要, 用于多说评论框的代码段:
&!-- 多说评论框 start --&
&div class="ds-thread" data-thread-key="请将此处替换成文章在你的站点中的ID" data-title="请替换成文章的标题" data-url="请替换成文章的网址"&&/div&
&!-- 多说评论框 end --&
&!-- 多说公共JS代码 start (一个网页只需插入一次) --&
&script type="text/javascript"&
var duoshuoQuery = {short_name:"请在此处替换成自己的短名"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async =
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '///embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
&!-- 多说公共JS代码 end --&
在templates中新建一个duoshuo.html并将代码放入其中, 并做一些修改
&!-- 多说评论框 start --&
&div class="ds-thread" data-thread-key="{{ post.id }}" data-title="{{ post.title }}" data-url="{{ post.get_absolute_url }}"&&/div&
&!-- 多说评论框 end --&
&!-- 多说公共JS代码 start (一个网页只需插入一次) --&
&script type="text/javascript"&
var duoshuoQuery = {short_name:"andrewliu"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async =
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '///embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
&!-- 多说公共JS代码 end --&
然后在my_blog/article/models.py中重写get_absolute_url方法
from django.db import models
from django.core.urlresolvers import reverse
# Create your models here.
class Article(models.Model) :
title = models.CharField(max_length = 100)
category = models.CharField(max_length = 50, blank = True)
date_time = models.DateTimeField(auto_now_add = True)
content = models.TextField(blank = True, null = True)
#博客文章正文
#获取URL并转换成url的表示格式
def get_absolute_url(self):
path = reverse('detail', kwargs={'id':self.id})
return "http://127.0.0.1:8000%s" % path
def __str__(self) :
return self.title
class Meta:
ordering = ['-date_time']
然后修改post.html
{% extends "base.html" %}
{% load custom_markdown %}
{% block content %}
&div class="posts"&
&section class="post"&
&header class="post-header"&
&h2 class="post-title"&{{ post.title }}&/h2&
&p class="post-meta"&
&a class="post-author" href="#"&{{ post.date_time|date:'Y /m /d'}}&/a& &a class="post-category post-category-js" href="{% url 'search_tag' tag=post.category %}"&{{ post.category }}&/a&
&div class="post-description"&
{{ post.content|custom_markdown }}
&/section&
{% include "duoshuo.html" %}
&/div&&!-- /.blog-post --&
{% endblock %}
只需要将duoshuo.html加入到当前页面中, {% include "duoshuo.html" %}这句代码就是将duoshuo.html加入到当前的页面中
现在启动web服务器, 在浏览器中输入, 看看是不是每个博文页面下都有一个多说评论框了..
markdown你的博文
markdown越来越流行, 越来越多的写博客的博主都喜欢上了makrdown这种标记性语言的易用性和美观性. 像, , 都是比较出名的markdown在线或者离线形式
现在我们就来markdown自己的博客吗, 首先是安装markdown库, 使用下面命令
#首先是安装markdown
$ pip install markdown
#记得激活虚拟环境
现在说说怎么markdown你的博文, 在article下建立新文件夹templatetags,然后我们来定义的自己的 template filter, 然后在templatetags中建立__init__.py, 让文件夹可以被看做一个包, 然后在文件夹中新建custom_markdown.py文件, 添加代码
import markdown
from django import template
from django.template.defaultfilters import stringfilter
from django.utils.encoding import force_text
from django.utils.safestring import mark_safe
register = template.Library()
#自定义filter时必须加上
@register.filter(is_safe=True)
#注册template filter
@stringfilter
#希望字符串作为参数
def custom_markdown(value):
return mark_safe(markdown.markdown(value,
extensions = ['markdown.extensions.fenced_code', 'markdown.extensions.codehilite'],
safe_mode=True,
enable_attributes=False))
然后只需要对需要进行markdown化的地方进行简单的修改,
{% extends "base.html" %}
{% load custom_markdown %}
{% block content %}
&div class="posts"&
&section class="post"&
&header class="post-header"&
&h2 class="post-title"&{{ post.title }}&/h2&
&p class="post-meta"&
&a class="post-author" href="#"&{{ post.date_time|date:'Y /m /d'}}&/a& &a class="post-category post-category-js" href="{% url 'search_tag' tag=post.category %}"&{{ post.category }}&/a&
&div class="post-description"&
{{ post.content|custom_markdown }}
&/section&
{% include "duoshuo.html" %}
&/div&&!-- /.blog-post --&
{% endblock %}
{% load custom_markdown %}添加自定义的filter, 然后使用filter的方式为{{ post.content|custom_markdown }}, 只需要对需要使用markdown格式的文本添加管道然后再添加一个自定义filter就好了.
现在启动web服务器, 在浏览器中输入, 可以看到全新的的markdown效果
这里代码高亮使用一个CSS文件导入到网页中就可以实现了, 因为在上面写markdown的filter中已经添加了扩展高亮的功能, 所以现在只要下载CSS文件就好了.
在找到你想要的代码主题, 我比较喜欢monokai, 然后在下载你喜欢的CSS主题, 然后加入当博客目录的static目录下, 或者最简单的直接上传七牛进行CDN加速
修改base.html的头部
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&meta name="viewport" content="width=device-width, initial-scale=1.0"&
&meta name="description" content="A layout example that shows off a blog page with a list of posts."&
&title&{% block title %} Andrew Liu Blog {% endblock %}&/title&
&link rel="stylesheet" href="/pure/0.5.0/pure-min.css"&
&link rel="stylesheet" href="/pure/0.5.0/grids-responsive-min.css"&
&link rel="stylesheet" href="/blog.css"&
&link rel="stylesheet" href="/monokai.css"&
&link rel="stylesheet" href="/monokai.css"&添加CSS样式到base.html就可以了.&&.
现在启动web服务器, 添加一个带有markdown样式的代码的文章, 就能看到效果了, 在浏览器中输入http://127.0.0.1:8000/项目主页：
使用方法：
本项目是一个插件，首先要安装
重命名sublog.sublime-settings.example为sublog.sublime-settings，配置你的登录信息，除了用户名，密码外，url也要修改为在管理->设置页面底部的metaweblog访问地址
拷贝整个文件夹到Sublime Text 2插件库下(Preferences->Browse Packages)，注意命名为"sublog"
安装，用于语法高亮，效果：
var test = function() {
console.log("语法高亮");
重启Sublime Text 2, Done
在博客园的管理->设置页面上传css样式(markdown.css)
博客文章必须以md为后缀, "shift + F8"插入header信息，其中tags使用","分割，publish为"false"的时候表示为草稿; "shift + F9"发布新博客，修改后同样使用"shift + F9"发布更新（留意Sublime Text 2底下状态栏通知）
要使用博客分类自动补全功能，需要开启Sublime Text 2 在文本模式下的补全功能，具体来说，就是在user settings中增加以下语句:
"auto_complete_selector": "source, text"
启动时会去同步一次博客分类，如果你修改了博客分类，需要执行"shift + F7"手动同步。
代码块显示行号，在sublog.sublime-settings中添加:
"show_ln":true
为了得到代码块中缩进在不同浏览器下的一致输出，请设置sublime text 2的tab为空格，例如我的设置如下：
"tab_size": 4,"translate_tabs_to_spaces": true,"detect_indentation": true,
支持github的代码块定义方式，例如下面的代码
```python ln_on
import random
class CardGame(object):
""" a sample python class """
NB_CARDS = 32
def __init__(self, cards=5):
self.cards = random.sample(range(self.NB_CARDS), 5)
print 'ready to play'
建议最好使用这种方式，由程序自动判断语言可能耗时较长。另外 ln_on 和 ln_off 作为辅助标记，表示本代码块是否启用行号。
支持的语言： 1c, apache, avrasm, axapta, bash, cmake, cpp, cs, css, delphi, diff, django, dos, erlang-repl, erlang, go, haskell, ini, java, javascript, lisp, ls lua, mel, nginx, objectivec, parser3, perl, php, profile, python, renderman, ruby, scala, smalltalk, sql, temp tex, vala, vbscript, vhdl, xml
特别的，使用no-highlight作为语言值表示本代码块不需要高亮。
支持本地图片地址作为img的url标记，例如:
![test](file:![test](file:
在UNIX like上：
当sublog检测到这是一个本地图片url的时候，会自动上传图片，并替换源文件的url为上传成功后得到的url
你还可以使用"shift + f10"发布当前选择的一行或多行里的"file://"url所指向的图片。
Makrdown兼容性
不支持表格和脚注
支持的平台
目前测试平台有windows7, ubuntu13.04，Mac平台应该也可以。如果使用中遇到问题，欢迎反馈。
Hack everything!
添加博客分类自动补全功能
添加文章基本结构的创建
修复在ubuntu下获取博客分类的编码问题(13-06-19)
语法高亮(13-06-22)
修改settings的加载方式，每次执行命令时都加载，使得改变可以即时生效
增加img支持
阅读(...) 评论()配置Sublime Text使用Markdown，语法高亮,生成HTML - 推酷
配置Sublime Text使用Markdown，语法高亮,生成HTML
像写代码一样写博客
了解Sublime Text和Markdown
Sublimne Text是最近一个非常火的编辑器，代码编辑器，速度非常快，功能非常强大。非常好用，而且跨Windows，Mac，Linux平台，有用Python API的插件，主题也支持，但是主题不是特别多。
Markdown是一种比较简单的标记语言，让你写文档的时候可以有结构，用纯文本编辑，可以纯文本阅读，也可以转换成HTML，让它有富文本的特性，如粗体，斜体，添加引用，图片链接。现在我主要都是用Markdown来写写笔记。
安装Sublime Text,Python,Python Markdown
Sublime Text下载后是exe程序，下一步下一步安装就好了。
安装Markdown插件
写到这里，我推荐你了解一下Sublime Text的
有了上面的知识，我们可以安装Sublime Text的插件了。用Package Control安装Markdown Build和Markdown Preview。安装好了后按Ctrl + Shift + P，输入Markdown就可以看到一些Markdown有关的操作了。我也写了一个关于Markdown的Sublime Text 2的扩展。 Copy to Clipboard，你也可以安装试下。
配置Markdown语法高亮
区别Sublime Text的theme和color-scheme,theme是指主题，包括一些编辑器的元素，而color-scheme是指语法高亮的颜色配置。
在了解这个之后，我再次推荐你安装Sublime Text的
文中推荐的那个Soda主题，然后在推荐这个Made of Code这个color scheme。由于它的
在国内不好访问，可以在这
color scheme的安装方法，把这个文件放到主题文件夹或者直接放到Package文件夹也可以，在菜单点
Preference & Browse Packages
,放到那个目录也可以。然后在
Preference & Color Scheme
里面选择那个对应的就可以了。这个时候还没有高亮，按Ctrl + Shift + P，选择”Set Syntax:Markdown”
修改Sublime Text新建和保存文件时的默认格式
直接在菜单的
Tools - Build
就可以生成HTML，快捷键Ctrl+B，生成后会用默认的浏览器打开。如果你按Ctrl + Shift + P用Markdown Preview这个扩展生成也可以，但是代码没有Markdown的代码好。
快捷键快速跳转文件的部分 Ctrl + R
可以把文件直接保存到Dropbox里面备份，或者有服务直接把Dropbox里面的Markdown文件转换成博客文章。
已发表评论数()
&&登&&&录&&
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见