0

In my project I want to include a Dialog that shows the open source licences of the libraries I use in the application. Particularly though, I want them to look a lot like this:

enter image description here

That's how it looks on Github, I also noticed that Google plus for android includes a look-alike formatting for their OSLicences, but despite of trying, I can't really get it to look the same way.

So based on the Google Plus and Github implementations, I can get the following:

  • A WebView is required to display the content.
  • Github uses pre and code html tags to wrap the content.

I had read somewhere that I could use Prettyfy for this job. Well, I tried, but I'm not sure if I'm supposed to select a specific theme, or a specific language in the params, since on my end I have: 

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

and then for the body: 

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

But my end result doesn't look all that great. Keep in mind I did try a not commenting the licence, but that result was even worse, since prettify was highlighting all of the keywords inside the licence.

Any ideas? Maybe it's something simpler than I thought, but I just can't figure it out.

daniel_c05
  • 11,438
  • 17
  • 60
  • 78

1 Answers1

1

I think you're complicating things a lot by trying to force a source code prettyprinter into rendering just a blob of monospace text, if you study the source of the page at gitgub you'll see that it's just some 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;
}

I made you a Fiddle that shows all the components.

For this kind of studies the Firebug plugin for Firefox is an absolute must, it allows you to grab every element on a page, look at the different css rules that modify its appearance, play around with the rules to see the effect, and thousands of things more. Even if you're only slightly interested in web development, you really should have Firebug and know how to use it.

fvu
  • 32,488
  • 6
  • 61
  • 79
  • I knew I was overcomplicating, but I just couldn't figure anything out, I did use 'Inspect Element' in chrome, but that didn't help`me much. Thanks! – daniel_c05 May 09 '13 at 00:58
  • Hey, if you don't mind, do you know how to set a defined width for the webpage so it doesn't stretch the box of the licence to screen? http://suspendedthoughts.com/open_source_licence.html – daniel_c05 May 09 '13 at 01:58
  • By adding `max-width` and `min-width` attributes you have some control over how the boxes will behave - I added these to the Fiddle, have a look and let me know whether that's the effect you're after. Of course, as it's a `pre`formatted block of text the text won't flow if you compress its width, so you will need to do some finetuning to get to the visual effect you're looking for. – fvu May 09 '13 at 11:42