如何通过VIM把代码格式化后生成HTML网页代码

简介:

需求及思路:演示需要,需要网站上嵌入一些代码,我的建议做法是根据代码文件,生成相应的HTML代码,然后通过HTML的框架结构嵌入到实际的页面中。

 
本节重点:通过VIM把打开的代码格式化后生成HTML页面代码。
 
操作:在用VIM打开filename.xxx后,在Normal模式下,输入“:TOhtml”,会自动生filename.xxx..html文件,然后我们可以通过w指令把它写到其它文件中。
 
保证可读性的其它操作:
为了使生成的网页文件在网页情况下显示更友好,如带行号,颜色更容易分辨等等,在生成html页面文件前我建议这样设定生成的格式。
 
Normal模式下执行下列指令:
其它你想执行的格式化命令
:set nu
:colorscheme koehler
:w colorscheme_koehler.html
 
图示:colorscheme_koehler.html
#!/bin/bash
 # wang_xiaoyu@qq.com
 
第一行不是必须
 # . color.function 
请运行前做这样的操作
 color() {
 COLOR_OK="\033[0;32;40m"
 # COLOR_OK="\033[0;34;40m"
 COLOR_RESET="\033[0m"
 USAGE="color \"strings\""
10 usage2="eg. color \"Usage: color \"strings\"\n\""
11 usage3="eg. color Reset\nThis is the way of reset CONSOLE! \n"
12 if [ $# -lt 1 ]; then
13 # echo "$USAGE" >&2
14         echo -e "Usage: $USAGE" >&2
15         echo "$usage2" >&2
16         (echo -en "${COLOR_OK}"; echo -ne "Usage: color \"strings\"\n"; echo -ne "${COLOR_RESET}") >&2
17         echo -en "$usage3" >&2
18         return 1
19 elif [ "$1" = "Reset" ]; then
20         echo -ne "${COLOR_RESET}"
21         echo "reset sucessfully! "
22         return 0
23 else
24         echo -ne "${COLOR_OK}"; echo -ne $@;echo -ne "${COLOR_RESET}"
25         return 0
26 fi
27 }



其它更高级的操作,我可能会在以后的文章中涉及到。



      本文转自xiaoyuwang 51CTO博客,原文链接:http://blog.51cto.com/wangxiaoyu/203471,如需转载请自行联系原作者

相关文章
|
9月前
精美按钮式广告代码HTML分享
精美按钮式广告代码HTML分享
242 4
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
637 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
412 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
10月前
|
移动开发 前端开发 JavaScript
HTML5实现好看的劳动节网页源码
HTML5实现好看的劳动节网页源码,劳动节网页,劳动节网页源码,内置十个页面,各种模板都有,可以根据这些页面扩展更多页面,网页由网站首页、劳动节介绍、劳动节由来、劳动节习俗、劳动节文化、劳动节活动、劳动节故事、劳动节民谣、联系我们、登录/注册等页面组成,兼容手机端,页面干净整洁,内容丰富,可以扩展自己想要的,注释完整,代码规范,各种风格都有,代码上手简单,代码独立,可以直接运行使用。也可直接预览效果。
322 4
html实现的文字发散动画效果代码
html实现的文字发散动画效果代码
182 30
|
10月前
|
移动开发 HTML5
HTML5实现好看的中秋节网页源码
HTML5实现好看的中秋节网页源码,中秋节网页,中秋节网页源码,节日网页大作业,作业源码,内置十个页面,各种模板都有,可以根据这些页面扩展更多页面,网页由网站首页、中秋节介绍、中秋节由来、中秋节习俗、中秋节文化、中秋节美食、中秋节故事、中秋节民谣、联系我们、登录/注册等页面组成,兼容手机端,页面干净整洁,内容丰富,可以扩展自己想要的,注释完整,代码规范,各种风格都有,代码上手简单,代码独立,可以直接运行使用。也可直接预览效果。
468 0
HTML5实现好看的中秋节网页源码
|
移动开发 前端开发 HTML5
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画特效代码,很有意思,一团三角形碎片跟随鼠标的移动,不冗长、不笨重,反而有一种很轻盈的感觉,非常不错
209 29
|
11月前
|
移动开发 前端开发 JavaScript
HTML5实现好看的端午节网页源码
HTML5实现好看的端午节网页源码,包含十个页面:网站首页、端午节介绍、由来、习俗、文化、美食、故事、民谣、联系我们及登录/注册。页面设计简洁美观,内容丰富,兼容手机端,代码规范且注释完整,易于扩展和修改。提供完整的源码下载和视频演示,方便学习和使用。
308 3
|
11月前
|
存储 移动开发 JavaScript
网页 HTML 自动播放下一首音乐
在 HTML5 中实现自动播放下一首音乐,通过管理音乐列表、操作音频元素和监听事件完成。创建包含多个音乐链接的列表,使用 `<audio>` 元素加载音乐,监听 `ended` 事件,在当前音乐结束时自动播放下一首。示例代码展示了如何使用 JavaScript 实现这一功能,确保无缝切换音乐。
|
存储 JavaScript 算法
(html在线预览cad图纸插件)网页CAD绘制条形码、二维码的教程
本文介绍了如何在mxcad中绘制条形码和二维码。对于条形码,首先根据应用场景选择合适的编码标准(如CODE39、EAN13等),通过编码规则将数据转换为二进制,并利用`McDbHatch`绘制条和空的组合,同时支持自定义实体及属性管理。 对于二维码,因其能存储更多信息且具备更强纠错能力,采用开源库QRCode.js进行编码处理,再通过`McDbHatch`绘制黑白矩阵,同样封装成自定义实体以便管理和扩展。文中还给出了完整的绘制流程与效果展示,包括创建二维码对象、设置参数、调用绘制方法以及最终的效果图。整个过程体现了灵活运用API与第三方库来实现复杂图形绘制的能力。