What are pre tags?
Pre tags are used on WordPress websites (and others) to change how text is displayed and designate when code samples are being typed. The CSS for the pre tag is formatted in a standard way for most templates. However, like most tags, a pre tag can easily be formatted with a little CSS magic. There are a lot of tutorials on how to create awesomely formatted pre tags (Perfect Pre Tags is just one such example), but I thought it would be cool to create a pre tag CSS library.
The Prettypre project
The Prettypre project aims to add some flavor to the <pre> tag by pretty-ing it up a bit. I’ll add to the CSS over time, but if you know a bit about CSS or have a format for your pre tags that you really like, please contribute. Whether it’s re-creating the look of a previously popular operating / hardware system or contributing something that’s just plan cool, bring it on! Remember what the terminal of a Tandy looked like? Make it happen in CSS!
Here are some general rules:
- CSS class name should be descriptive but less than 10 characters.
- When you create a new class, please create a corresponding demo in the demo.html file.
- Please only use web-safe, Google or similarly reliable fonts.
- Suggestions welcome!
Here’s the Apple IIe style I created!
Apple IIe (c) 2014 The Open-Source Community