代码之家 › 专栏 › 技术社区 › Boardy

使用<span>标记在HTML中编写颜色编码的XML代码,导致出现空格

xml css html

Boardy · 技术社区 · 12 年前

我正在做一个项目,我需要在网页上显示一些XML。我正在尝试使用不同XML参数的各种span标签对XML进行颜色编码。

这或多或少是一种工作方式,但为了保持代码整洁,我将每个标签放在一行新的代码上。这是一种工作方式,因为每个标签都保持在同一行,这就是我想要的,除非我放一个 <br /> 标记,但它在每个跨度标记之间留出一个空间。

例如,我的XML显示为

<  Application  x  :  Class  ="YourApp.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

我想要

<Application x:Class="YourApp.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

以下是我如何尝试用HTML编写代码

<div class="codeBlock">
                        <span class="stringAndOperands"><</span>
                        <span class="xmltag">Application</span>
                        <span class="xmlParameter">x</span>
                        <span class="stringAndOperands">:</span>
                        <span class="xmlParameter">Class</span>
                        <span class="stringAndOperands">="YourApp.App"</span><br />
                        <span class="xmlParameter">xmlns</span><span class="stringAndOperands">="http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span>
                    </div>

下面是我的CSS

.xmltag
{
   color: #a31515;
   white-space: pre;
}

.stringAndOperands
{
    color: #0034ff;
    white-space: pre;
}

.xmlParameter
{
    color: #ff0000;
    white-space: pre;
}

.codeBlock
{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    background-color: #cdcdcd;
    font-family: courier new;
    padding: 5px;
}

当跨度在不同的线上时,如何删除空格。我知道我可以把每个跨度放在同一行上,这样可以防止这种情况发生,但这会让我的源代码看起来有点混乱。

谢谢你能提供的任何帮助。