html - 美化本地链接不正确

标签 html css pretty-print

我在让 Google Code Prettify 正常工作时遇到问题。此示例正在运行,使用提供的远程文件:

<html>
<head>
    <title>Google Code Prettify testing</title>
    <script data-brackets-id='140' src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css" defer="defer">
    </script>
</head>

<body>

<h1>Google Code Prettify testing</h1>

<pre class="prettyprint" style="font-size: 12pt;">
&lt;script type="text/javascript"&gt;
// This is a comment
var myString = "Hello, World!";
var myInt = 42;

function helloWorld(world) {
    for (var myInt; --myInt &gt;= 0;) {
        alert(myString);
    }
}
&lt;/script&gt;
&lt;style&gt;
    p { color: pink }
    b { color: blue }
    u { color: "umber" }
&lt;/style&gt;
</pre>
  
</body>
</html>

结果:

prettify-testing1

这是从 Prettify 远程托管中提取的。请注意 <script> 中的某些元素仅用于样式和行为。以下也可以正常工作:

<html>
<head>
  <title>Prettify Default Test</title>
  <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
</head>

它只是以默认的外观和行为呈现(注意这是不同的浏览器)

prettify-testing5


但是,当我在本地下载并保存文件时,我是这样写的:

<html>
<head>
    <title>Google Code Prettify testing</title>
    <link href="google-code-prettify/src/prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="google-code-prettify/js-modules/run_prettify.js"></script>
</head>

<body onload="prettyPrint()">

<h1>Google Code Prettify testing</h1>

<pre class="prettyprint" style="font-size: 12pt;">
&lt;script type="text/javascript"&gt;
// This is a comment
var myString = "Hello, World!";
var myInt = 42;

function helloWorld(world) {
    for (var myInt; --i &gt;= 0;) {
        alert('Hello ' + String(world));
    }
}
&lt;/script&gt;
&lt;style&gt;
p { color: pink }
b { color: blue }
u { color: "umber" }
&lt;/style&gt;
</pre>
  
</body>
</html>

然后,没有任何格式保留:

prettify-testing2

这是文件夹结构的快照。我已经验证以确保它在代码中被准确引用...

美化.css

prettify-testing3

run_prettify.js

prettify-testing4

关于为什么会这样,您能提供一些建议吗?

最佳答案

您的格式设置不起作用的原因是您为“run_pretify.js 文件引用了错误的路径。您将所有美化文件存储在 google-code-prettify/src/而您试图链接到不存在的文件夹,例如 js-modules。

我已经在本地对此进行了测试,使用您提供的具有相同文件夹结构的确切源来复制您的环境,并得出相同的结果,格式只呈现黑色字体。一旦我将其更改为“google-code-prettify/src/”,它就可以正常工作。

同样,要解决这个问题,请更改路径:

<script type="text/javascript" src="google-code-prettify/js-modules/run_prettify.js"></script>

<script type="text/javascript" src="google-code-prettify/src/run_prettify.js"></script>

您可能遇到的唯一其他问题是某些浏览器(尤其是 IE)可能会阻止某些内容在您的浏览器中显示。如果您所在的网络强制阻止某些内容显示或在显示被阻止的内容之前提示您获得许可,您可能必须选择“显示被阻止的内容”或类似的东西,然后它才会显示您想要的方式。

希望这对您有所帮助!

编辑:这对您来说是不必要的 - 但可能会帮助遇到类似情况的其他社区成员 - 但我想我也会引用 Getting Started 部分,该部分涉及为您自己服务的要求JS 和 CSS 文件以及如何启动和运行。

https://code.google.com/p/google-code-prettif/wiki/GettingStarted#Serving_your_own_JS_&_CSS

关于html - 美化本地链接不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27914206/

相关文章:

javascript - <a> 上的 jquery click() 事件具有特定前缀的 id 不触发 alert() 函数

css - 使用 jquery 进行搜索文本匹配时如何突出显示表格网格中的选定行?

css - 你必须在媒体查询中使用设备像素比吗?

python - 为什么Python 3.4.3使用lxml不能正确输出打印语句?

javascript - 如何使用 jquery 制作一个简单的 prettyprint <pre>

html - 更改每个偶数 div 中链接的颜色

php - 同步离线 JQuery Mobile 表单

html - 如何对这些图像应用叠加效果?

html - DIV float :right with no text wrapping

java - 用于保存 Java -> HTML 的 Intellij IDEA 插件?