<<\/span>pre<\/span> id=\"codeSnippet\" style<\/span>=\"border<\/span>-top<\/span>-style<\/span>: none;<\/span> font-size<\/span>: 8pt;<\/span> overflow<\/span>: visible;<\/span>
border<\/span>-left<\/span>-style<\/span>: none;<\/span> font-family<\/span>: 'Courier New', courier, monospace;<\/span> width<\/span>: 100%;<\/span>
border<\/span>-bottom<\/span>-style<\/span>: none;<\/span> color<\/span>: black;<\/span> padding<\/span>-bottom<\/span>: 0px;<\/span> direction<\/span>: ltr;<\/span>
text-align<\/span>: left;<\/span> padding<\/span>-top<\/span>: 0px;<\/span> border<\/span>-right<\/span>-style<\/span>: none;<\/span> padding<\/span>-left<\/span>: 0px;<\/span>
margin<\/span>: 0em;<\/span> line-height<\/span>: 12pt;<\/span> padding<\/span>-right<\/span>: 0px;<\/span> background-color<\/span>: #f4f4f4\"><\/span><\/pre>\n<\/div>\n
If you’re not paying attention, you can end up with a lot of blog posts with these “embittered” styles and end up with serviceable but not necessarily attractive text blocks. (raises hand<\/em>).<\/p>\nThis option can be switched off when authoring new blog posts. See that “Embed Styles” check-button in the UI?<\/p>\n
![\"image\"](\"http:\/\/www.spacefold.com\/colin\/morethanfour\/wp-content\/uploads\/image_8.png\" "\\"image\\"")
If you un-select that option, you get this generated instead:<\/p>\n
\n<<\/span>pre<\/span> id<\/span>=\"codeSnippet\"<\/span> class<\/span>=\"csharpcode\"<\/span>><\/span>This is a test without embedded styling<\/<\/span>pre<\/span>><\/span><\/pre>\n<\/div>\nThat’s quite a difference.<\/p>\n
Now we get a CLASS attribute instead of the embedded styles, so if we want to improve upon the basic default <pre> tag style, we’ll obviously need to add a style to our CSS.<\/p>\n
Note: no matter what language\/syntax you choose in Code Snippet’s Language dropdown list, the emitted CLASS value will always be “csharpcode”. This could be confusing because you might not be pasting C# code into the snippet, but the CSS class doesn’t appear to be related.<\/p>\n
\n![\"image\"](\"http:\/\/www.spacefold.com\/colin\/morethanfour\/wp-content\/uploads\/image_9.png\" "\\"image\\"")
<\/pre>\n<\/div>\n
OK, we can definitely live with this, and add a style directive to our CSS. But what about all those previous blog posts with text blocks with embedded styles? <\/p>\n
This is !important<\/h3>\n
Up until today I always thought that embedded styles trumped CSS, but it turns out there is a qualifier you can add to CSS that forces modern web browsers to use the CSS styles preferentially, even for embedded styles.<\/p>\n
That qualifier is “!important”.<\/p>\n
Now I can beautify my historical blog posts by adding the following to my blog theme’s style.css:<\/p>\n
\n\/* Windows Live Writer - Code Snippet - Fix for emitted embedded styles *\/<\/span>
#codeSnippet {
background-color<\/span>: aliceblue !important;<\/span>
font-family<\/span>: \"Droid Sans Mono\", Consolas, courier, monospace !important;<\/span>
}<\/pre>\n<\/div>\n
Awesome. <\/p>\n
References<\/div>\n\n- http:\/\/openlivewriter.org\/<\/a>\n
- http:\/\/lvildosola.blogspot.com\/2009\/03\/code-snippet-plugin-for-windows-live.html<\/a>\n
- http:\/\/www.hardcodet.net\/2009\/09\/live-writer-plugins-to-format-content-through-css-classes<\/a>\n
- https:\/\/www.w3schools.com\/cssref\/sel_id.asp<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
I’m a long-time fan of Windows Live Writer, which I can’t link you to because it is no longer available from Microsoft. (Search for Windows Live Essentials 2012 and maybe you’ll find something.) Thankfully the project was moved into open-source and a variant of it is available today as Open Live Writer. That’s cool – […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,3],"tags":[],"class_list":["post-18","post","type-post","status-publish","format-standard","hentry","category-blog","category-blogengine-net","post-preview"],"_links":{"self":[{"href":"https:\/\/spacefold.com\/colin\/morethanfour\/wp-json\/wp\/v2\/posts\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spacefold.com\/colin\/morethanfour\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/spacefold.com\/colin\/morethanfour\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/spacefold.com\/colin\/morethanfour\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spacefold.com\/colin\/morethanfour\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":0,"href":"https:\/\/spacefold.com\/colin\/morethanfour\/wp-json\/wp\/v2\/posts\/18\/revisions"}],"wp:attachment":[{"href":"https:\/\/spacefold.com\/colin\/morethanfour\/wp-json\/wp\/v2\/media?parent=18"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/spacefold.com\/colin\/morethanfour\/wp-json\/wp\/v2\/categories?post=18"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/spacefold.com\/colin\/morethanfour\/wp-json\/wp\/v2\/tags?post=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}