如何为 PHP 和 CSS 设计差异实现样式

Question

http://code.stephenmorley.org/php/diff-implementation/#styling

我正在按照上面的 link 来测试代码。

我已将它们放在一起，但在浏览器中，但我没有看到任何漂亮的颜色 table 就像作者提到的那样。我不知道如何包含 style 代码知道如何做到这一点吗？

index.php

<?php
// include the Diff class
require_once './class.Diff.php';

// output the result of comparing two files as plain text
echo Diff::toTable(Diff::compareFiles('/tmp/foo1', '/tmp/foo2'));
?>

Answer 1

您需要在页面上包含 CSS，方法是将其嵌入 <head> 或 link 到外部样式表。

<!DOCTYPE html>
<html>
    <head>
        <!-- external CSS -->
        <link rel="stylesheet" type="text/css" href="style.css" />

        <!-- embedded CSS -->
        <style type="text/css">
            .diff td {
                vertical-align: top;
                white-space: pre;
                white-space: pre-wrap;
                font-family: monospace;
            }
        </style>
</head>
<body>
    ...

您提供的 link 给出了每个 td 所需的最小值 CSS 的示例：

.diff td {
    vertical-align: top;
    white-space: pre;
    white-space: pre-wrap;
    font-family: monospace;
}

它还解释了类您可以设置的样式：diffUnmodified、diffDeleted、diffInserted 和 diffBlank。

这是您 link 编辑的示例页面中的 CSS：

.diff td {
    padding :0 0.667em;
    vertical-align: top;
    white-space: pre;
    white-space: pre-wrap;
    font-family: Consolas,'Courier New',Courier,monospace;
    font-size: 0.75em;
    line-height: 1.333;
}

.diff span {
    display: block;
    min-height: 1.333em;
    margin-top: -1px;
    padding: 0 3px;
}

* html .diff span {
    height: 1.333em;
}

.diff span:first-child {
    margin-top: 0;
}

.diffDeleted span {
    border: 1px solid rgb(255,192,192);
    background: rgb(255,224,224);
}

.diffInserted span {
    border: 1px solid rgb(192,255,192);
    background: rgb(224,255,224);
}

如何为 PHP 和 CSS 设计差异实现样式

How to style diff implementation for PHP with CSS

php

css

diff