Question

HTML和JS代码格式化原理是什么？

网上也有很多在线的HTMLjs等等的格式化工具，最近闲来无聊准备用这个功能来练练手，但是居然一点头绪也没有，希望知道的大神或者有头绪的大神指点一二，谢谢

看清楚是问源码怎么写的哦，不是问其他的

Answer 1

所谓的源码是指程序的原始代码，经过编译器编译之后成机器能识别的二进制代码（机器代码），目前的编程语言有C/C++、JAVA、C#等，很多，要写“源码”当然要先学这些“语言”等你学会了便可以写“源码”了。

源码模板有很多种类，在这里我主要讲的是ZBLOG风格模板如何修改，此方法可以举一反三。对于WordPress、PJBLOG、动易CMS、织梦CMS、风讯CMS的风格模板修改方法都是一样的。
　　修改一个你满意的网页模板，你要有以下基础，会一点HTML（标准通用标记语言下的一个应用）语言，会一点DIV+CSS，会一点图片制作方法。
第一步，先讲解一下主题模板的构成。下面以Z-blog主题“低调与华丽”风格模板来说明，模板均分为三大部分，①网页的html文件，②CSS文件，③图片文件。一般情况修改模板只需修改这三部分。
第二步，你可以让模板可视化再修改。几乎所有默认的源码网页模板的路径都是系统自带的标签。这样把讲HTML文件放入Dreamweaver里时会是一堆的代码。如何将程序模板转换为可视化界面呢。其实只需要修改CSS和图片路径就可以了。
　　如：
　　<link rel="stylesheet" rev="stylesheet" href="<#ZC_BLOG_HOST#>themes/<#ZC_BLOG_THEME#>/style/<#ZC_BLOG_CSS#>.css" type="text/css" media="screen" />加红色的部分就是系统标签，这时你可以修改成你本机的虚拟路径。其他的程序标签都有说明，请查看相关系统标签。
　　如：<link href="../style/css/LuSongSong-Index.css" rel="stylesheet" type="text/css" />修改好之后你就可以在Dreamweaver里面直观的看到网页界面了，并且修改起来也非常方便。（记得模板修改之后别忘记把CSS路径改回去哦！）
　　如图所示：
　　第三步，修改LOGO，和模板相关图片。网页我所要的框架改好了，但里面的logo和banner都还是人家的怎么办呢？接下来就是如何修改模板中的相关图片了。由于卢松松提供的“低调与华丽”风格模板，包含的有源文件，所以修改起来非常方便，你只需要修改里面的文字，下载一点你喜欢的其他图标就可以了。对于修改网页中的图片推荐使用Fireworks，原因是Fireworks不仅可以打开PNG源文件，还可以打开PSD源文件，相反Photoshop是不能打开PNG源文件的[2]
第四步，教程看的再多不自己动动手，亲自试一试。那就赶快下载“低调与华丽”风格模板试一试吧！

虽然大部分是复制粘贴的.但是希望我复制粘贴的回答能够帮助到你.

Answer 2

具体可以看 SyntaxHighlighter.js

Answer 3

怎么写，网上找一套模板来看不就一目了然