Category: javascript

  • Migrate from MediaWiki to GitBook

    Export data from MediaWiki Using ‘Special:Export’ to export all pages at MediaWiki Go to Special:Allpages and choose the desired article/file. Copy the list of page names to a text editor Put all page names on separate lines. I did this job with Vim. Go to Special:Export and paste all your page names into the textbox, […]

  • 关于Markdown Preview Plus的补充说明

    对Markdown Preview Plus的使用方法做一个补充说明,这是一个chrome的插件,方便预览markdown格式的文件。 使用方法 从chrome的webstore安装Markdown Preview Plus插件 在设置页中勾选 “允许访问文件网址”,如图 在chrome中打开本地markdown文件,http/https也是可以支持的 你会看到已经转换成html的内容 为每个md文件设置样式 新的0.2.1版本已经支持对每个md文件设置样式,这个可以覆盖全局的样式设置

  • Markdown Preview Plus

    Markdown Preview Plus是一个chrome下的markdown预览插件。这个插件基于Markdown Preview的基础上,做了一部分改进。 改进的部分 支持自动加载,这个选项默认是关闭的,可在options中设置。 支持http和https的markdown文件预览 支持部分css样式,例如Github,TopMarks,另外也从Mac下的客户端Mou中导入了Clearness样式 预览 设置界面的预览 使用详情可参考使用markdown格式写Todo list 做这个插件的初衷 我比较习惯使用vim编辑文件,虽然现在有不少带即时预览功能的markdown编辑工具,仍然无法适应,所以做了这个插件来满足日常的编辑需求。如果有问题,请在github上指出。

  • 使用markdown格式写Todo list

    上周我完成了chrome的markdown-preview扩展的修改,使它支持markdown文件的实时预览功能。现在可以考虑用这个功能来做一些更酷的事情,比如说,写Todo list? 开始干 首先我找到了一个叫topmarks的markdown样式文件,这个样式文件能给出一个漂亮的Todo list样式,我把它合并到了 修改后的markdown preview插件 关注了一下markdown-preview原作者的github,他有计划增加一项功能,让用户可以自定义css文件,但是近期完成无望,所以我新增了一个topmarks的分支,采用新的样式 在chrome的扩展中重新加载插件 效果图 如图,我采用vim编辑文件,右边摆上chrome浏览器预览,文件采用dropbox同步,保证我随时能更新这个文件。 关于topmarks的补充说明 topmarks样式采用了这些自定义标签 <t> 新任务 <d> 已完成的任务 <c> 已取消的任务 http, ical, mailto, file链接有不同的图标

  • markdown文件的编辑以及实时预览

    之前看到有一款叫Mou的软件可以编辑markdown格式的文本内容并且实时预览,可是我比较喜欢用vim编辑器,所以就想着能不能用别的软件配合着来实现实时预览。 今天看到一个chrome的扩展叫markdown preview,它可以自动把md或markdown后缀的文本转换为html格式在chrome中查看,只是还欠缺一个自动刷新的功能。然后我看到它的源码已经放在github上,于是抓回来做了一些修改,加上了自动刷新的功能。 演示 尝试了一下在vim中编辑文件,然后在chrome中浏览,效果还不错,见下图: 更改后的扩展 我把修改后的markdown preview插件放在github上 , 已经尝试向原作者发起pull requests,要试用的话需要按下面几步操作: 把插件的代码clone回来 git clone git://github.com/volca/markdown-preview.git 开启chrome扩展的开发者模式,具体位置在窗口 -> 扩展程序里 载入正在开发的扩展程序 将允许访问文件网址勾选上 然后你就可以尝试用chrome浏览器打开markdown文件预览html,采用趁手的编辑器去修改它。 BTW chrome下的插件写起来比想像的要简单,写javascript就是了 现在这篇blog即是我用markdown格式写成的,用到了wordpress的markdown on save扩展。 Update 测试把文件放在dropbox的Public下,修改之后的效果能够立刻在共享链接里看到效果,很完美

  • 如何安装Node.js

    下面分别介绍在Mac, Ubuntu,Centos以及Windows下安装Node.js. Mac 在Mac下,如果你喜欢用homebrew,那么只用一行就可以装好: brew install node 否则,只能考虑手工安装了,步骤如下: 安装Xcode 安装git 运行下面的命令行编译node.js git clone git://github.com/joyent/node.git cd node ./configure make sudo make install Ubuntu 安装依赖包 sudo apt-get install g++ curl libssl-dev apache2-utils sudo apt-get install git-core 运行下面的命令行: git clone git://github.com/joyent/node.git cd node ./configure make sudo make install Windows 用cygwin来安装node,步骤如下: 安装cygwin 在cygwin的目录下,运行setup.exe安装下面列表中的包 devel → openssl devel → g++-gcc […]

  • 图片预加载效果的实现

    使用picasa的时候,注意到它首先是显示模糊的图片,然后图片突然变得清晰,这样做有一定的好处——picasa的图片翻页是用javascript实现的,如果直接载入大图,中间势必会有个空档,用户在这中间会感觉很空虚~~ 于是我花了点时间,打探它的实现方式,发觉很简单,不是用的lowsrc之类的标记,而是简单的js。 代码示例 var img = new Image(); img.src = “http://imghost/big_640_480.jpg”; img.onload = function() { document.getElementById(‘myImage’).src = this.src; } 如此这般,待大图载入完成之后,利用js替换原小图的src,就完成了图片预加载效果。关键点是图片的onload事件利用。

  • wordpress plugin – search engine related posts

    Table of content Description Usage Download History Link Description English version When someone is referred from a search engine like Google, the plugin show your blog content matched the terms they search for. 中文说明 当用户从google搜索到你的博客上,这个wordpress 插件会根据用户搜索的关键词显示你的博客上更多的相关内容。目前也只对google生效,下一个版本将对baidu生效。 这个插件完全使用javascript加上google的api完成,不需要占用服务器端的资源,环保且安全。 Usage English version: unzip it Put <div style=”display:none” id=”search_content”></div> at the place in your template where you want […]

  • inline-js 0.4 —— wordpress plugin

    Inline-js plugin minor update. It now work fine with exec-php plugin. Download Inline-js 0.4 详细信息 inline-js wordpress plugin

  • 可以用button代替input type=”submit”吗

    在ie下,<button>标记恐怕还存在几个不大不小的问题。 在一个表单里,如果有一个以上”submit”类型的<button>标签存在,在表单被提交时,不管你点击哪个<button>,所有<button>的值都会被post/get。 <button>的缺省type属性被设置为”button”,但是在A级别浏览器下,应该设置为”submit”才对 如果你用javascript去访问<button>的value属性,IE却返回了<button>的innerHTML属性,很让人恼火。 (可以使用”getAttributeNode”方法来避免.) 例如,一段HTML: text 1 text 2 在IE下,上面两个button的数据都会被提交。并且ie会提交这两个button的innerText而不是value。而其它浏览器仅仅提交你点击的那个button。 以上,应该尽量避免使用button标记。