格式化開源許可證ala StackOverflow/Github

在我的項目中，我想包含一個對話框，顯示我在應用程序中使用的庫的開源許可證。特別是，雖然，我想讓他們看起來就像這樣：格式化開源許可證ala StackOverflow/Github

enter image description here

這是它的外觀在Github上，我也注意到，谷歌，加上對Android包括爲他們OSLicences一個look-alike formatting，但儘管嘗試，我無法真正讓它看起來一樣。

因此，基於谷歌的Plus和Github上實現，我可以得到如下：

網頁視圖需要顯示的內容。
Github使用pre和code html標籤來包裝內容。

我曾經在某處讀過我可以使用Prettyfy這份工作。好吧，我想，但我不知道我應該選擇一個特定的主題，或在PARAMS特定的語言，因爲在我結束我：

<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。請記住，我確實嘗試了一次沒有評論許可證，但結果更糟，因爲美化突出顯示許可證內關鍵字的所有。

任何想法？也許這比我想象的更簡單，但我無法弄清楚。

來源

2013-05-09 daniel_c05

我認爲你通過試圖強制源代碼漂亮打印機渲染一個等寬的文本，如果你在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，它顯示了所有的組件。

對於這種研究the Firebug plugin的Firefox是絕對必要的，它允許你抓住頁面上的每一個元素，看看不同的CSS規則，修改它的外觀，玩弄規則看看效果，以及成千上萬的東西更多。即使你對Web開發只有一點興趣，你也應該有Firebug，並知道如何使用它。

來源

2013-05-09 00:31:32 fvu

我知道我太過於複雜，但我什麼也沒搞清楚，我確實在Chrome中使用了'檢查元素'，但這並沒有幫到什麼。謝謝！ – 2013-05-09 00:58:17

嘿，如果你不介意，你知道如何爲網頁設置一個定義的寬度，這樣它不會拉伸許可證的框來屏幕？ http://suspendedthoughts.com/open_source_licence.html – 2013-05-09 01:58:05

通過添加'max-width'和'min-width'屬性，您可以控制盒子的行爲 - 我將它們添加到小提琴中，讓我看看知道這是否是你以後的效果。當然，因爲它是一個預先格式化的文本塊，所以如果您壓縮文本的寬度，文本將不會流動，因此您需要進行一些微調以獲得所需的視覺效果。 – fvu 2013-05-09 11:42:15

格式化開源許可證ala StackOverflow/Github

回答

相關問題