CSDN代码片排版

CSDN上发博文，尤其是有代码的，要用好“插入代码”功能（见下图）。这是必须的，未来的IT程序员，需要用这种方式，展示出自己的代码。这是尊重读者，树立品牌的需要。

　　相关方法，参考见视频《发布第一个C++上机报告》和博文《搬家到CSDN的同学要用好一个好功能》。

　　不过这样一来，也带来了一些麻烦，用不好这些功能，会将页面搞得乱七八糟，尤其对刚开始学习程序设计的菜鸟。本文将就常见的问题，提出解决办法。这对老鸟根本不是问题，菜鸟们做到了，就是一种进步，同时，对以后要学习HTML而言，也是一次非常好的提前体验。

　　此文菜鸟独享，非菜人员就此绕行。

插入的代码，常被分隔成几部分，如何处理？

　　有人插入代码后，又做了些修改，常把代码搞成了下面的样子：

[cpp] view
plain copy print ?

/*这是我的第一个程序

[cpp] view
plain copy print ?

作者：蔡袅

[cpp] view
plain copy print ?

#include <iostream>
using namespace std;
int main()
{
cout<<"This is a C++ program."<<endl;
return 0;
}

　　太难看了！要解决上面的问题，有必要知道点HTML的初步知识。

　　网页中的排版，是受一种称之为超文本标记语言（HTML）控制的。其中规定了一系列用尖括号表示的“标志”，例如：一个段落用<p>开始，用</p>结束，</br>代表换行，<img>表示插入的图像，<a>.......</a>是超链接。

　　上面那一段C++代码对应的HTML描述为：

[html] view
plain copy print ?

<pre name="code" class="cpp">/*这是我的第一个程序</pre>
<pre name="code" class="cpp"> 作者：蔡袅</pre>
<pre name="code" class="cpp">*/</pre>
<pre name="code" class="cpp">#include <iostream>
using namespace std;
int main()
{
cout<<"This is a C++ program."<<endl;
return 0;
}
</pre>

　　可以看出，用<pre name="code" class="cpp">......</pre>表示中间的那部分（.......）是C++代码。对照看一下，如果我们将所有代码放在一对<pre>...</pre>中间，其编号就可以做成连续的（即将中间多余的</pre><pre...>删除。）。

　　即将上面的代码修改为：

[html] view
plain copy print ?

<pre name="code" class="cpp">
/*这是我的第一个程序
作者：蔡袅
*/
#include <iostream>
using namespace std;
int main()
{
cout<<"This is a C++ program."<<endl;
return 0;
}
</pre>

　　对应的C++代码将显示为：

[cpp] view
plain copy print ?

/*这是我的第一个程序
作者：蔡袅
*/
#include <iostream>
using namespace std;
int main()
{
cout<<"This is a C++ program."<<endl;
return 0;
}

　　知道这一点之后，最重要的，怎么能看到HTML代码并且进行修改呢？

　　在编辑博文时，最上方的工具栏中，有一个“源代码”按钮（如下图），可以在“源代码”和“可视化编辑”间切换。我们就点击这个按钮后，去编辑HTML源文档。

　　要修改的源代码如下图，其中被选中的蓝色区域是要删除的内容。

有办法避免上面的情况发生吗？

　　最好将代码（包括需要的注释）利用IDE（集成开发环境，如VC++6.0等）、记事本等编辑好后，一次性通过“插入代码”加入，避免插入代码后再进行修改。出现“乱七八糟”，根本原因是在代码中加入了回车键（当然，是插入代码的这个插件还有待完善）。

　　如果一定要在代码要行，建议敲回车前，按住shift键，可以解决这个问题。

不是代码的部分，也当作代码编辑了，该如何做？

　　我有位学生发博文，结果是：

[cpp] view
plain copy print ?

/*这是我的第一个程序
作者：蔡袅
*/
#include <iostream>
using namespace std;
int main()
{
cout<<"This is a C++ program."<<endl;
return 0;
}
运行结果：<img src="http://img.my.csdn.net/uploads/201210/06/1349511756_1311.png" alt="">
总结：程序调好了，运行结果的图呢？

　　问题的原因是，最后两行不是C++，但也写在插入的代码中了。查看源代码，果然是将运行结果和总结都放在<pre>和</pre>中间了。如下图所示：

　　修改的方法自然是，在“源代码”中，将最后的</pre>移到真正的代码结束的位置，即程序中最后一个花括号之后，如上图箭头的指向。

　　修改后的结果如下，运行结果的截图能看见了！

[cpp] view
plain copy print ?

/*这是我的第一个程序
作者：蔡袅
*/
#include <iostream>
using namespace std;
int main()
{
cout<<"This is a C++ program."<<endl;
return 0;
}

运行结果：

总结：程序调好了，将</pre>标志前移，运行结果的图出现了！

实在太乱了，再出个主意吧！

　　出现混乱，用上面的方法调整过来，真是一件非常美妙的事情。C++是编程的入门课，借着C++，我们要学程序设计，在学习程序设计过程中，我们祈求遇着各种问题，并一一突破，这就是专业能力进步的过程，这个过程让你始终能找到要学习的内容。

　　遇着问题不绕过，这是一种基本的态度。进步总是在解决问题中发生。

　　有时，问题让人感觉不爽了，或者解决的办法会，调起来挺麻烦。千万让自己要有好的感受，不必一棵树上吊死。

　　我的习惯是，太乱了就重编辑，反正编好的程序在。或者，将在博客中写好的文字，复制、粘贴到记事本中（目的是把各种控制格式的符号全给过滤掉了），然后将程序和所有的其他文字一次性地复制、粘贴到博文中去。很显然，程序会当作一般文本发布，这不好。下一步，将代码部分剪切出来，就在那个位置，“插入代码”，之后不必做任何修改，一篇漂亮的博文完成！