CodeProject 文章格式技巧
5.00/5 (33投票s)
一些技巧，帮助您以简洁一致的方式格式化文章和提示。
引言
在 CodeProject 上发布文章时，我们希望您专注于文章内容，而不是花哨的 HTML 和 CSS 技巧。布局越简洁清晰，读者就越容易理解您的作品。
基于此，我们制定了一些简单的规则、指南和技巧，以使您的工作更轻松一些。
动机
我们希望在 CodeProject 上阅读文章的体验是一致的。从一篇文章到另一篇文章，布局、样式和格式应相对统一，以便于阅读。
我们还需要偶尔更新样式表的自由，因此遵循一些简单的规则和指南可以使您的文章在不出现问题或看起来…奇怪的情况下保持最新的样式。
规则
- 遵循 HTML 约定，并按预期使用 HTML 标签.
如果您使用BLOCKQUOTE来缩进文本，那么您就假设BLOCKQUOTE标签在所有浏览器中都可以缩进文本，并且您还假设我们没有使用 CSS 来为输出添加引号或其他花招。如果您想缩进，请使用带样式的DIV。
同样，请使用P标签来表示段落。请不要使用BR标签来断开段落。
- 仅使用简单的 HTML.
我们的意思是：坚持使用最简单、最干净的 HTML。使用B或STRONG来加粗文本，使用CODE标签来标记行内代码，并使用PRE来包裹代码块。不要用带有疯狂样式的SPAN块包裹一切：我们的在线编辑器（以及我们的编辑）很可能会将它们全部删除。
- 无活动内容，如 Javascript 或 Flash
无论如何，您都无法将这些内容添加到您的文章中。这是一个安全风险（并且可能令读者烦恼）。但是：如果您有强烈的理由希望在文章中包含实时 Javascript，请联系我们，我们可以破例。
指南
- 尽可能在设置 HTML 元素样式时使用我们的预定义类，而不是使用内联样式。.
SPAN元素可以使用 filename、command、error、success 和 failure 类。例如：<span class="command">Save File</span>
TABLE元素使用simple、themed、grid、feature和spaced类。请注意THEAD元素的使用。<table class="simple" cellspacing="0" cellpadding="0"> <thead> <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td></tr> </thead> <tbody><tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>A</td><td>B</td><td>C</td></tr> </tbody></table>
结果
列 1 列 2 列 3 1 2 3 A B C <table class="themed" cellspacing="0" cellpadding="0"> <thead> <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td></tr> </thead> <tbody><tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>A</td><td>B</td><td>C</td></tr> </tbody></table>
结果
列 1 列 2 列 3 1 2 3 A B C <table class="feature" cellspacing="0" cellpadding="0"> <thead> <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td></tr> </thead> <tbody><tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>A</td><td>B</td><td>C</td></tr> </tbody></table>
结果
列 1 列 2 列 3 1 2 3 A B C <table class="grid" cellspacing="0" cellpadding="0"> <thead> <tr><td>Col 1</td><td>Col 2</td><td>Col 3</td></tr> </thead> <tbody><tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>A</td><td>B</td><td>C</td></tr> </tbody></table>
结果
列 1 列 2 列 3 1 2 3 A B C
-
DIV元素，您可以使用以下类：<div class="callout">This is a callout</div>
这是一个提示框<div class="sidebar-left">This is a left-sidebar</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo arcu eget scelerisque ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut erat nisl, faucibus eleifend ultricies sit amet, aliquam vitae velit. Nunc feugiat gravida convallis. Ut quis odio rhoncus, facilisis quam at, aliquet velit. Aliquam nec bibendum nulla, quis sollicitudin felis. Maecenas vitae auctor augue, consequat placerat odio. Mauris ac vulputate nisi. Morbi quis enim aliquam, iaculis eros non, vulputate nibh
<div class="sidebar-right">This is a right-sidebar</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo arcu eget scelerisque ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut erat nisl, faucibus eleifend ultricies sit amet, aliquam vitae velit. Nunc feugiat gravida convallis. Ut quis odio rhoncus, facilisis quam at, aliquet velit. Aliquam nec bibendum nulla, quis sollicitudin felis. Maecenas vitae auctor augue, consequat placerat odio. Mauris ac vulputate nisi. Morbi quis enim aliquam, iaculis eros non, vulputate nibh<div class="sidebar">This is a sidebar (no float or outer text wrapping)</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo arcu eget scelerisque ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut erat nisl, faucibus eleifend ultricies sit amet, aliquam vitae velit. Nunc feugiat gravida convallis. Ut quis odio rhoncus, facilisis quam at, aliquet velit. Aliquam nec bibendum nulla, quis sollicitudin felis. Maecenas vitae auctor augue, consequat placerat odio. Mauris ac vulputate nisi. Morbi quis enim aliquam, iaculis eros non, vulputate nibh
-
A元素可以使用external类来指示到外部来源的链接。<a class="external" href="http://www.google.com">Remember to search first, then ask.</a>
- 减少或消除元素周围的额外间距或内边距。
元素周围的间距应由我们的样式表来管理。但也有例外，例如当您想控制浮动元素周围的间距时。
要消除间距，请在元素上使用class="tight"，要提供标准间距，请使用class="spaced"。
- 确保元素宽度小于 700px。
否则，您文章中的元素将无法适应所有屏幕，或者会添加滚动条。
- 保持代码块尽可能小。
没有人需要看 1000 行的内联代码。删除与解释不直接相关的部分。代码将在您的代码下载中提供，所以没有必要重复。
技巧与窍门
- 同一代码的多种语言版本
在文章文本中包含代码示例时，您可以提供同一代码示例的多种语言版本，并将它们显示为一组整洁的选项卡，每个选项卡对应一种语言。要做到这一点，请将您的代码示例一个接一个地发布，然后将所有内容包裹在带有类 "code-samples" 的 DIV 中。例如：<div class="code-samples"> <pre lang="C#"> ... // some C# code ... </pre> <pre lang="VB.NET"> ... ' some VB code ... </pre> </div>
这将导致
... // some C# code ...
... ' some VB code ...
- 为代码块添加行号
包含代码示例时，可以通过在 PRE 标签中添加linecount="on"来自动包含行号。如果您想从特定行开始编号，请使用 countstart="<start>"，要设置行号递增，请使用 countincrement="<increment>"。例如：<pre lang="aspnet" linecount="true">
或<pre lang="vb" linecount="true" countstart="10" countincrement="10">
这将导致
PRINT "HELLO WORLD" GOTO 10
- 在文章中使用 LaTeX
您可以通过 MathJax 在文章中使用 MathML 或 TeX。
将您的数学公式包含在类为 "math" 的标签内，并使用$...$来包裹方程块，使用\(...\)来包裹行内方程。例如：<div class="math">$...$</div>，并使用<span class="math">\(...\)</span>来包裹行内方程。
例如<div class="math"> $\begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned}$ </div>将渲染为$\begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned}$和
The solution is <span class="math">\(y = x^2 \hbox{ when x > 2}\)</span>将渲染为
解决方案是 \(y = x^2 \hbox{ 当 x > 2 时}\)