Question

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

我正在关注测试代码的上述链接。

我把它们放在一起但是在浏览器中，但我没有看到任何好的颜色表，就像作者提到的那样。我不知道如何在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>或通过链接到外部样式表。

<!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>
    ...

您提供的链接提供了每个td所需的最低CSS的示例：

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

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

这是您链接的示例页面中的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);
}

如何使用CSS为PHP设置diff实现样式

1 个答案: