[HTML/CSS应用]博客文档排版之源码编辑模式下在文章中插入代码
上一篇博客我们介绍了如何设置比较合适的行间距与段间距,这篇文章我们将介绍如何在源码编辑模式下，向文章中插入代码。我们将介绍两种方式。
第一种插入代码的方式：
自定义代码样式；我们看下面的示例，这里我们演示在文章中插入一段html代码
<div style="border: 2px solid blue; background-color:#CCC; padding:10px 20px;line-height:1.5;"> <pre style="overflow:auto"> <div style="line-height:1.5;text-indent:30px;font-size:1.2em;font-family:‘楷体‘;"> <h2 style="text-align:center;margin:20px;">幸福是心的感觉</h2> <p style="margin:0px 0px 10px 0px;">生活中不缺美......</p> <p style="margin:0px 0px 10px 0px;">生活中不缺幸福......</p> </div> </pre> </div>
注解：上述示例定义了一个蓝色边框、灰色背景的代码块显示区；<pre>与</pre>之间是代码块
border 边框
background-color 背景色
padding 内边距
line-height 行高
需要注意的是：“<”与“>”是HTML保留字符。我们在插入代码时需要进行相应替换，使用“<”代替“<”，使用“>”代替“>”。
上述示例实际显示效果如下：
<div style="line-height:1.5;text-indent:30px;font-size:1.2em;font-family:‘楷体‘;"> <h2 style="text-align:center;margin:20px;">幸福是心的感觉</h2> <p style="margin:0px 0px 10px 0px;">生活中不缺美......</p> <p style="margin:0px 0px 10px 0px;">生活中不缺幸福......</p> </div>
第二种插入代码的方式：
使用CSDN定义的样式；我们看下面的示例，这里我们演示在文章中插入一段cpp代码
<pre name="code" class="cpp"> #include <QApplication> #include <QLabel> int main(int argc, char *argv[]) { QApplication app(argc, argv); QLabel *label = new QLabel("Hello Qt!"); label->show(); return app.exec(); } </pre>
注解：上述示例中我们没有自定义边框，而是使用CSDN的样式；<pre>与</pre>之间是代码块
同样，我们需要使用“<”代替“<”，使用“>”代替“>”。
<pre>中class为代码类型，目前CSDN提供的可选类型有
"html"、"objc"、"javascript"、"css"、"php"、"csharp"、"cpp"、"java"、"python"、"ruby"、"vb"、"delphi"、"sql"、"plain"。
上述示例实际显示效果如下：
#include <QApplication>
#include <QLabel>
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QLabel *label = new QLabel("Hello Qt!");
label->show();
return app.exec();
}
当然，如果你是在CSDN博客文章中插入代码，使用第二种方式可能相对方便一些，不过第一种方式可以给你更多的DIY空间。
-- End --
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
