格式化开源许可证ala StackOverflow / Github

时间:2013-05-09 00:10:34

标签: html formatting prettify

在我的项目中,我想要包含一个Dialog,它显示我在应用程序中使用的库的开源许可证。特别是,我希望它们看起来像这样:

enter image description here

这就是它在Github上的样子,我也注意到Google plus for android包含一个look-alike formatting用于他们的OSLicences,但尽管尝试过,但我真的不能让它看起来一样。

因此,基于Google Plus和Github实施,我可以获得以下内容:

  • 需要WebView才能显示内容。
  • Github使用precode个html标记来包装内容。

我读过某个地方,我可以使用Prettyfy来完成这项工作。好吧,我试过了,但是我不确定我是否应该选择一个特定的主题或者参数中的特定语言,因为在我的结尾我有:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>
<title>Open Source Licences</title>
</head>

然后是身体:

<body onload="prettyPrint()">
<pre class="prettyprint">
/*Copyright 2012 Jeremy Feinstein
*
*Licensed under the Apache License, Version 2.0 (the "License");
*you may not use this file except in compliance with the License.
*You may obtain a copy of the License at
*
*http://www.apache.org/licenses/LICENSE-2.0
*
*Unless required by applicable law or agreed to in writing, software
*distributed under the License is distributed on an "AS IS" BASIS,
*WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
*See the License for the specific language governing permissions and
*limitations under the License.
*/
</pre>

但我的最终结果doesn't look all that great。请记住,我确实尝试过不对许可证进行评论,但结果更糟糕,因为美化是强调许可证中的所有关键字。

有什么想法吗?也许这比我想象的要简单,但我无法理解。

1 个答案:

答案 0 :(得分:1)

我认为通过强制使用源代码prettyprinter来渲染一大堆等宽文本来解决问题很复杂,如果你在gitgub学习页面的来源,你会发现它只是一些css

pre {
    background-color: #F8F8F8;
    border: 1px solid #DDDDDD;
    border-radius: 3px 3px 3px 3px;
    font-size: 13px;
    line-height: 19px;
    overflow: auto;
    padding: 6px 10px;
    font-family: Consolas,"Liberation Mono",Courier,monospace;
}

我为你制作了一张显示所有组件的Fiddle

对于Firefox的这种研究the Firebug plugin是绝对必须的,它允许你抓住页面上的每个元素,查看修改其外观的不同css规则,玩规则来查看效果,以及成千上万的事情。即使您对Web开发只有一点兴趣,您也应该使用Firebug并知道如何使用它。