Created
October 1, 2009 12:37
-
-
Save jasoncodes/198936 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| For <http://bjeanes.com/2009/10/01/code-formatting-in-rss-feeds>: | |
| Firstly, please don't limit your feed to just excerpts. Clicking through to read content is annoying at best (more clicks) and impossible at worst (i.e. offline). | |
| Inline styling of the feed content is a much better idea but still not the best. Markup should be semantic (your current code block are not IMO) and feed readers may not even respect user styles. | |
| I think the markup needs to be fixed so it makes sense semantically. I'm thinking it should be a normal <pre/> with <span/>s for style hooks. To add line numbers, wrap each line in <code/> so we can style each line (unless I'm missing a way to write a selector to match all lines a la ::first-line). | |
| I have quickly thrown together a proof of concept, tested in Safari 4 only. It's roughly styled like your blog with the <pre/> code generated by the TextMate.tmbundle but with manually added <code/> tags. The styling is a good candidate for SASS with all the calculations. | |
| What I particularly like about this solution is it degrades well and at least in Safari, when you copy blocks of code, line numbers don't come along for a ride as well. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body | |
| { | |
| margin: 1em; | |
| background: #888; | |
| color: black; | |
| font-family: Helvetica, sans-serif; | |
| font-size: 11pt; | |
| } | |
| section | |
| { | |
| display: block; | |
| background: #ccc; | |
| margin: 0; | |
| margin-left: 10em; | |
| margin-right: 10em; | |
| padding: 20px; | |
| border: 1px solid black; | |
| } | |
| pre.textmate-source | |
| { | |
| counter-reset: line; | |
| background: #333 !important; | |
| color: white; | |
| margin-left: -20px; | |
| margin-right: -20px; | |
| padding-left: 20px; | |
| padding-right: 0; | |
| padding-top: 1em; | |
| padding-bottom: 1em; | |
| white-space: pre; | |
| word-wrap: normal; | |
| overflow-x: auto; | |
| overflow-y: hidden; | |
| } | |
| pre.textmate-source code:before | |
| { | |
| content: counters(line, "") " "; | |
| counter-increment: line; | |
| position: absolute; | |
| margin-left: -51px; | |
| display: inline-block; | |
| text-align: right; | |
| width: 30px; | |
| border-right: 1px solid black; | |
| margin-right: 20px; | |
| background: #555; | |
| color: #ccc; | |
| } | |
| pre.textmate-source :first-child:before | |
| { | |
| -webkit-border-top-left-radius: 10px; | |
| padding-top: 1em; | |
| margin-top: -1em; | |
| } | |
| pre.textmate-source :last-child:before | |
| { | |
| -webkit-border-bottom-left-radius: 10px; | |
| padding-bottom: 1em; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <title>Test</title> | |
| <link rel="stylesheet" type="text/css" href="textmate_sunburst.css" media="screen" /> | |
| <link rel="stylesheet" type="text/css" href="test.css" media="screen"> | |
| </head> | |
| <body> | |
| <section> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> | |
| <pre class="textmate-source sunburst"><span class="source source_ruby source_ruby_rails"><code>entries <span class="keyword keyword_operator keyword_operator_assignment keyword_operator_assignment_ruby">=</span> <span class="support support_class support_class_ruby">Hash</span><span class="punctuation punctuation_separator punctuation_separator_method punctuation_separator_method_ruby">.</span><span class="keyword keyword_other keyword_other_special-method keyword_other_special-method_ruby">new</span> <span class="punctuation punctuation_section punctuation_section_scope punctuation_section_scope_ruby">{</span><span class="punctuation punctuation_separator punctuation_separator_variable punctuation_separator_variable_ruby">|</span><span class="variable variable_other variable_other_block variable_other_block_ruby">hash</span><span class="punctuation punctuation_separator punctuation_separator_variable punctuation_separator_variable_ruby">,</span> <span class="variable variable_other variable_other_block variable_other_block_ruby">key</span><span class="punctuation punctuation_separator punctuation_separator_variable punctuation_separator_variable_ruby">|</span> hash<span class="punctuation punctuation_section punctuation_section_array punctuation_section_array_ruby">[</span>key<span class="punctuation punctuation_section punctuation_section_array punctuation_section_array_ruby">]</span> <span class="keyword keyword_operator keyword_operator_assignment keyword_operator_assignment_ruby">=</span> <span class="support support_class support_class_ruby">Hash</span><span class="punctuation punctuation_separator punctuation_separator_method punctuation_separator_method_ruby">.</span><span class="keyword keyword_other keyword_other_special-method keyword_other_special-method_ruby">new</span> <span class="punctuation punctuation_section punctuation_section_scope punctuation_section_scope_ruby">{</span><span class="punctuation punctuation_separator punctuation_separator_variable punctuation_separator_variable_ruby">|</span><span class="variable variable_other variable_other_block variable_other_block_ruby">h</span><span class="punctuation punctuation_separator punctuation_separator_variable punctuation_separator_variable_ruby">,</span> <span class="variable variable_other variable_other_block variable_other_block_ruby">k</span><span class="punctuation punctuation_separator punctuation_separator_variable punctuation_separator_variable_ruby">|</span> h<span class="punctuation punctuation_section punctuation_section_array punctuation_section_array_ruby">[</span>k<span class="punctuation punctuation_section punctuation_section_array punctuation_section_array_ruby">]</span> <span class="keyword keyword_operator keyword_operator_assignment keyword_operator_assignment_ruby">=</span> <span class="punctuation punctuation_section punctuation_section_array punctuation_section_array_ruby">[]</span> <span class="punctuation punctuation_section punctuation_section_scope punctuation_section_scope_ruby">}}</span></code> | |
| <code>entries<span class="punctuation punctuation_section punctuation_section_array punctuation_section_array_ruby">[</span><span class="constant constant_numeric constant_numeric_ruby">153</span><span class="punctuation punctuation_section punctuation_section_array punctuation_section_array_ruby">][</span><span class="constant constant_other constant_other_symbol constant_other_symbol_ruby"><span class="punctuation punctuation_definition punctuation_definition_constant punctuation_definition_constant_ruby">:</span>monday</span><span class="punctuation punctuation_section punctuation_section_array punctuation_section_array_ruby">]</span> <span class="keyword keyword_operator keyword_operator_assignment keyword_operator_assignment_augmented keyword_operator_assignment_augmented_ruby"><<</span> <span class="constant constant_numeric constant_numeric_ruby">12</span><span class="punctuation punctuation_separator punctuation_separator_method punctuation_separator_method_ruby">.</span>hours</code> | |
| <code>entries<span class="punctuation punctuation_section punctuation_section_array punctuation_section_array_ruby">[</span><span class="constant constant_numeric constant_numeric_ruby">153</span><span class="punctuation punctuation_section punctuation_section_array punctuation_section_array_ruby">][</span><span class="constant constant_other constant_other_symbol constant_other_symbol_ruby"><span class="punctuation punctuation_definition punctuation_definition_constant punctuation_definition_constant_ruby">:</span>tuesday</span><span class="punctuation punctuation_section punctuation_section_array punctuation_section_array_ruby">]</span> <span class="keyword keyword_operator keyword_operator_assignment keyword_operator_assignment_augmented keyword_operator_assignment_augmented_ruby"><<</span> <span class="constant constant_numeric constant_numeric_ruby">3</span><span class="punctuation punctuation_separator punctuation_separator_method punctuation_separator_method_ruby">.</span>hours</code> | |
| <code>entries<span class="punctuation punctuation_section punctuation_section_array punctuation_section_array_ruby">[</span><span class="constant constant_numeric constant_numeric_ruby">87</span><span class="punctuation punctuation_section punctuation_section_array punctuation_section_array_ruby">][</span><span class="constant constant_other constant_other_symbol constant_other_symbol_ruby"><span class="punctuation punctuation_definition punctuation_definition_constant punctuation_definition_constant_ruby">:</span>monday</span><span class="punctuation punctuation_section punctuation_section_array punctuation_section_array_ruby">]</span> <span class="keyword keyword_operator keyword_operator_assignment keyword_operator_assignment_augmented keyword_operator_assignment_augmented_ruby"><<</span> <span class="constant constant_numeric constant_numeric_ruby">7</span><span class="punctuation punctuation_separator punctuation_separator_method punctuation_separator_method_ruby">.</span>hours</code> | |
| <code>entries<span class="punctuation punctuation_section punctuation_section_array punctuation_section_array_ruby">[</span><span class="constant constant_numeric constant_numeric_ruby">87</span><span class="punctuation punctuation_section punctuation_section_array punctuation_section_array_ruby">][</span><span class="constant constant_other constant_other_symbol constant_other_symbol_ruby"><span class="punctuation punctuation_definition punctuation_definition_constant punctuation_definition_constant_ruby">:</span>tuesday</span><span class="punctuation punctuation_section punctuation_section_array punctuation_section_array_ruby">]</span> <span class="keyword keyword_operator keyword_operator_assignment keyword_operator_assignment_augmented keyword_operator_assignment_augmented_ruby"><<</span> <span class="constant constant_numeric constant_numeric_ruby">2.5</span><span class="punctuation punctuation_separator punctuation_separator_method punctuation_separator_method_ruby">.</span>hours</code> | |
| <code></code> | |
| <code>p entries <span class="comment comment_line comment_line_number-sign comment_line_number-sign_ruby"><span class="punctuation punctuation_definition punctuation_definition_comment punctuation_definition_comment_ruby">#</span>=> {87=>{:monday=>[7.hours], :tuesday=>[2.5.hours]}, 153=>{:monday=>[12.hours], :tuesday=>[3.hours]}}</span></code> | |
| <code></code> | |
| <code><span class="keyword keyword_control keyword_control_ruby">if</span> false?</code> | |
| <code> p <span class="string string_quoted string_quoted_single string_quoted_single_ruby"><span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_begin punctuation_definition_string_begin_ruby">'</span>Testing indentation.<span class="punctuation punctuation_definition punctuation_definition_string punctuation_definition_string_end punctuation_definition_string_end_ruby">'</span></span></code> | |
| <code><span class="keyword keyword_control keyword_control_ruby">end</span></code> | |
| </span></pre> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> | |
| </section> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Stylesheet generated from TextMate theme | |
| * | |
| * Sunburst | |
| * (π) Soryu, 2005 | |
| * | |
| */ | |
| /* Mostly to improve view within the TextMate HTML viewer */ | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| pre.textmate-source { | |
| margin: 0; | |
| padding: 0 0 0 2px; | |
| font-family: Monaco, monospace; | |
| font-size: 12px; | |
| line-height: 1.3em; | |
| word-wrap: break-word; | |
| white-space: pre; | |
| white-space: pre-wrap; | |
| white-space: -moz-pre-wrap; | |
| white-space: -o-pre-wrap; | |
| } | |
| pre.textmate-source.sunburst { | |
| color: #F8F8F8; | |
| background-color: #000000; | |
| } | |
| pre.textmate-source .linenum { | |
| width: 75px; | |
| padding: 0.1em 1em 0.2em 0; | |
| color: #888; | |
| background-color: #eee; | |
| } | |
| pre.textmate-source.sunburst span { | |
| padding-top: 0.2em; | |
| padding-bottom: 0.1em; | |
| } | |
| pre.textmate-source.sunburst ::selection { | |
| background-color: rgba(221, 240, 255, 0.20); | |
| } | |
| /* Comment */ | |
| pre.textmate-source.sunburst .comment { | |
| color: #AEAEAE; | |
| font-style: italic; | |
| } | |
| /* Constant */ | |
| pre.textmate-source.sunburst .constant { | |
| color: #3387CC; | |
| } | |
| /* Entity */ | |
| pre.textmate-source.sunburst .entity { | |
| color: #89BDFF; | |
| } | |
| /* Keyword */ | |
| pre.textmate-source.sunburst .keyword { | |
| color: #E28964; | |
| } | |
| /* Storage */ | |
| pre.textmate-source.sunburst .storage { | |
| color: #99CF50; | |
| } | |
| /* String */ | |
| pre.textmate-source.sunburst .string { | |
| color: #65B042; | |
| } | |
| /* Support */ | |
| pre.textmate-source.sunburst .support { | |
| color: #9B859D; | |
| } | |
| /* Variable */ | |
| pre.textmate-source.sunburst .variable { | |
| color: #3E87E3; | |
| } | |
| /* Invalid – Deprecated */ | |
| pre.textmate-source.sunburst .invalid_deprecated { | |
| color: #FD5FF1; | |
| font-style: italic; | |
| text-decoration: underline; | |
| } | |
| /* Invalid – Illegal */ | |
| pre.textmate-source.sunburst .invalid_illegal { | |
| color: #FD5FF1; | |
| background-color: rgba(86, 45, 86, 0.75); | |
| } | |
| /* ♦ Embedded Source (Bright) */ | |
| pre.textmate-source.sunburst .text .source { | |
| background-color: rgba(177, 179, 186, 0.03); | |
| } | |
| /* ♦ Entity inherited-class */ | |
| pre.textmate-source.sunburst .entity_other_inherited-class { | |
| color: #9B5C2E; | |
| font-style: italic; | |
| } | |
| /* ♦ String embedded-source */ | |
| pre.textmate-source.sunburst .string_quoted .source { | |
| color: #DAEFA3; | |
| } | |
| /* ♦ String constant */ | |
| pre.textmate-source.sunburst .string .constant { | |
| color: #DDF2A4; | |
| } | |
| /* ♦ String.regexp */ | |
| pre.textmate-source.sunburst .string_regexp { | |
| color: #E9C062; | |
| } | |
| /* ♦ String.regexp.«special» */ | |
| pre.textmate-source.sunburst .string_regexp .constant_character_escape, pre.textmate-source.sunburst .string_regexp .source_ruby_embedded, pre.textmate-source.sunburst .string_regexp .string_regexp_arbitrary-repitition { | |
| color: #CF7D34; | |
| } | |
| /* ♦ String variable */ | |
| pre.textmate-source.sunburst .string .variable { | |
| color: #8A9A95; | |
| } | |
| /* ♦ Support.function */ | |
| pre.textmate-source.sunburst .support_function { | |
| color: #DAD085; | |
| } | |
| /* ♦ Support.constant */ | |
| pre.textmate-source.sunburst .support_constant { | |
| color: #CF6A4C; | |
| } | |
| /* c C/C++ Preprocessor Line */ | |
| pre.textmate-source.sunburst .meta_preprocessor_c { | |
| color: #8996A8; | |
| } | |
| /* c C/C++ Preprocessor Directive */ | |
| pre.textmate-source.sunburst .meta_preprocessor_c .keyword { | |
| color: #AFC4DB; | |
| } | |
| /* j Entity Name Type */ | |
| pre.textmate-source.sunburst .entity_name_type { | |
| text-decoration: underline; | |
| } | |
| /* j Cast */ | |
| pre.textmate-source.sunburst .meta_cast { | |
| color: #676767; | |
| font-style: italic; | |
| } | |
| /* ✘ Doctype/XML Processing */ | |
| pre.textmate-source.sunburst .meta_sgml_html .meta_doctype, pre.textmate-source.sunburst .meta_sgml_html .meta_doctype .entity, pre.textmate-source.sunburst .meta_sgml_html .meta_doctype .string, pre.textmate-source.sunburst .meta_xml-processing, pre.textmate-source.sunburst .meta_xml-processing .entity, pre.textmate-source.sunburst .meta_xml-processing .string { | |
| color: #494949; | |
| } | |
| /* ✘ Meta.tag.«all» */ | |
| pre.textmate-source.sunburst .meta_tag, pre.textmate-source.sunburst .meta_tag .entity { | |
| color: #89BDFF; | |
| } | |
| /* ✘ Meta.tag.inline */ | |
| pre.textmate-source.sunburst .source .entity_name_tag, pre.textmate-source.sunburst .source .entity_other_attribute-name, pre.textmate-source.sunburst .meta_tag_inline, pre.textmate-source.sunburst .meta_tag_inline .entity { | |
| color: #E0C589; | |
| } | |
| /* ✘ Namespaces */ | |
| pre.textmate-source.sunburst .entity_name_tag_namespace, pre.textmate-source.sunburst .entity_other_attribute-name_namespace { | |
| color: #E18964; | |
| } | |
| /* § css tag-name */ | |
| pre.textmate-source.sunburst .meta_selector_css .entity_name_tag { | |
| color: #CDA869; | |
| } | |
| /* § css:pseudo-class */ | |
| pre.textmate-source.sunburst .meta_selector_css .entity_other_attribute-name_tag_pseudo-class { | |
| color: #8F9D6A; | |
| } | |
| /* § css#id */ | |
| pre.textmate-source.sunburst .meta_selector_css .entity_other_attribute-name_id { | |
| color: #8B98AB; | |
| } | |
| /* § css.class */ | |
| pre.textmate-source.sunburst .meta_selector_css .entity_other_attribute-name_class { | |
| color: #9B703F; | |
| } | |
| /* § css property-name: */ | |
| pre.textmate-source.sunburst .support_type_property-name_css { | |
| color: #C5AF75; | |
| } | |
| /* § css property-value; */ | |
| pre.textmate-source.sunburst .meta_property-group .support_constant_property-value_css, pre.textmate-source.sunburst .meta_property-value .support_constant_property-value_css { | |
| color: #F9EE98; | |
| } | |
| /* § css @at-rule */ | |
| pre.textmate-source.sunburst .meta_preprocessor_at-rule .keyword_control_at-rule { | |
| color: #8693A5; | |
| } | |
| /* § css additional-constants */ | |
| pre.textmate-source.sunburst .meta_property-value .support_constant_named-color_css, pre.textmate-source.sunburst .meta_property-value .constant { | |
| color: #DD7B3B; | |
| } | |
| /* § css constructor.argument */ | |
| pre.textmate-source.sunburst .meta_constructor_argument_css { | |
| color: #8F9D6A; | |
| } | |
| /* ⎇ diff.header */ | |
| pre.textmate-source.sunburst .meta_diff, pre.textmate-source.sunburst .meta_diff_header { | |
| color: #F8F8F8; | |
| font-style: italic; | |
| background-color: #0E2231; | |
| } | |
| /* ⎇ diff.deleted */ | |
| pre.textmate-source.sunburst .markup_deleted { | |
| color: #F8F8F8; | |
| background-color: #420E09; | |
| } | |
| /* ⎇ diff.changed */ | |
| pre.textmate-source.sunburst .markup_changed { | |
| color: #F8F8F8; | |
| background-color: #4A410D; | |
| } | |
| /* ⎇ diff.inserted */ | |
| pre.textmate-source.sunburst .markup_inserted { | |
| color: #F8F8F8; | |
| background-color: #253B22; | |
| } | |
| /* Markup: Italic */ | |
| pre.textmate-source.sunburst .markup_italic { | |
| color: #E9C062; | |
| font-style: italic; | |
| } | |
| /* Markup: Bold */ | |
| pre.textmate-source.sunburst .markup_bold { | |
| color: #E9C062; | |
| font-weight: bold; | |
| } | |
| /* Markup: Underline */ | |
| pre.textmate-source.sunburst .markup_underline { | |
| color: #E18964; | |
| text-decoration: underline; | |
| } | |
| /* Markup: Quote */ | |
| pre.textmate-source.sunburst .markup_quote { | |
| color: #E1D4B9; | |
| font-style: italic; | |
| background-color: rgba(254, 224, 156, 0.07); | |
| } | |
| /* Markup: Heading */ | |
| pre.textmate-source.sunburst .markup_heading, pre.textmate-source.sunburst .markup_heading .entity { | |
| color: #FEDCC5; | |
| background-color: #632D04; | |
| } | |
| /* Markup: List */ | |
| pre.textmate-source.sunburst .markup_list { | |
| color: #E1D4B9; | |
| } | |
| /* Markup: Raw */ | |
| pre.textmate-source.sunburst .markup_raw { | |
| color: #578BB3; | |
| background-color: rgba(177, 179, 186, 0.03); | |
| } | |
| /* Markup: Comment */ | |
| pre.textmate-source.sunburst .markup .comment { | |
| color: #F67B37; | |
| font-style: italic; | |
| } | |
| /* Markup: Separator */ | |
| pre.textmate-source.sunburst .meta_separator { | |
| color: #60A633; | |
| background-color: #242424; | |
| } | |
| /* Log Entry */ | |
| pre.textmate-source.sunburst .meta_line_entry_logfile, pre.textmate-source.sunburst .meta_line_exit_logfile { | |
| background-color: rgba(238, 238, 238, 0.16); | |
| } | |
| /* Log Entry Error */ | |
| pre.textmate-source.sunburst .meta_line_error_logfile { | |
| background-color: #751012; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment