Style a block of code in a blog that accepts HTML.

overflow:auto;padding:5px;border-style:double;font-weight:bold;color:#00ff00;background-color:0;"><pre style="white-space:pre-wrap;white-space:-moz-pre-wrap !important;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;_white-space:pre;
With code, the only way to have spaces parsed correctly in any kind of portable way is to use ... but then long lines will not wrap. That's kinda important for low-res screens or smaller windows. Ideally, code blocks would be wrapped to the screen width, with line numbers and syntax hilighted, so that if someone does "view source", they'd see the unadulterated code for cutting and pasting. Then have all formatting done by CSS and javascript, such that: - if someone copies the text as displayed in any browser, they'll get properly formatted code in their clipboard, without wrapping - it fails gracefully so that it looks at least reasonable in all browsers, even those that don't know CSS/JS and can't do colours (eg lynx, screen readers) If anyone knows a way, that would make me happy. Until then, I am stuck with the above as the best I can do. For example, in LiveJournal, something like this: <div width="100%" style="(the code above)"><pre>Code goes here</pre> ... will look considerably better and more readable than the default <blockquote><pre></pre></blockquote>. It's not perfect, of course. If you have enough control to create your own css file, you should definitely do that instead.

0
2012-02-28 04:14:11
css

What do you think?

Any thoughts on this command? Does it work on your machine? Can you do the same thing with only 14 characters?

You must be signed in to comment.

What's this?

commandlinefu.com is the place to record those command-line gems that you return to again and again. That way others can gain from your CLI wisdom and you from theirs too. All commands can be commented on, discussed and voted up or down.

Share Your Commands


Similar Commands

extract XML RSS etc by tags such as or <code> or <description></a></strong> </p> <p style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis"> <strong><a href="/commands/view/12654/create-thumbnails-and-a-html-page-for-listing-them-with-links-to-sources">Create thumbnails and a HTML page for listing them (with links to sources)</a></strong> </p> <p style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis"> <strong><a href="/commands/view/13544/append-html-extension-to-all-files-in-a-directory-structure-that-contains-html-code.">Append html-extension to all files in a directory structure that contains html-code.</a></strong> </p> <p style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis"> <strong><a href="/commands/view/8080/quick-and-dirty-formatting-for-html-code">quick and dirty formatting for HTML code</a></strong> </p> </div> <hr> <div class="box-copy"> <h3 class="righthead">Stay in the loop…</h3> <div class="toggleable"> <dl> <dt>Follow the Tweets.</dt> <dd> <a href="http://twitter.com/commandlinefu"><img class="link-img" src="/images/twitter.jpg" /></a> <p>Every new command is wrapped in a tweet and posted to <a href="http://twitter.com">Twitter</a>. Following the stream is a great way of staying abreast of the latest commands. For the more discerning, there are Twitter accounts for commands that get a minimum of 3 and 10 votes - that way only the great commands get tweeted.</p> <p> » <a style="font-weight:bold;" href="http://twitter.com/commandlinefu">http://twitter.com/commandlinefu</a><br/> » <a style="font-weight:bold;" href="http://twitter.com/commandlinefu3">http://twitter.com/commandlinefu3</a><br/> » <a style="font-weight:bold;" href="http://twitter.com/commandlinefu10">http://twitter.com/commandlinefu10</a> </p> </dd> <dt>Subscribe to the feeds.</dt> <dd> <a style="font-weight:bold;" href="http://feeds2.feedburner.com/Command-line-fu"><img class="link-img" src="/images/rss.gif" /></a> <p>Use your favourite RSS aggregator to stay in touch with the latest commands. There are feeds mirroring the 3 Twitter streams as well as for virtually every other subset (users, tags, functions,…):</p> <p>Subscribe to the feed for:</p> <ul id="feed-links"> <li>» <a style="font-weight:bold;" href="http://feeds2.feedburner.com/Command-line-fu">all commands</a></li> <li>» <a style="font-weight:bold;" href="/feed/threeup">commands with 3 up-votes</a> (commandlinefu3)</li> <li>» <a style="font-weight:bold;" href="/feed/tenup">commands with 10 up-votes</a> (commandlinefu10)</li> </ul> </dd> </dl> </div> </div> <!-- <div class="box-copy"> <a class="visibility-toggle" id="box-copy-tags">Hide</a> <h3>Top Tags</h3> <div class="toggleable"><br> <a href="/commands/tagged/112/awk">awk</a>, <a href="/commands/tagged/34/bash">bash</a></li>, <a href="/commands/tagged/235/curl">curl</a>, <a href="/commands/tagged/123/find">find</a>, <a href="/commands/tagged/163/grep">grep</a>, <a href="/commands/tagged/64/linux">Linux</a>, <a href="/commands/tagged/110/sed">sed</a></li> </ul> </div> </div> <div class="box-copy"> <a class="visibility-toggle" id="box-copy-functions">Hide</a> <h3>Functions</h3> <div class="toggleable"> </div> </div> --> </div> </div> </div> <footer class="bs-footer" role="contentinfo" style="background-color:#F5F5F5;"> <div class="container"> <p style="padding-top:20px;">commandlinefu.com © 2018 <a href="https://www.danstools.com" target="_blank">Dan's Tools</a> | <a href="/site/faq">FAQs</a> | <a href="/site/api">API</a> | <a href="/site/widget">Widget</a> | <a href="/site/privacy">Privacy</a></p> </div> </footer> <!-- <div id="wrapper"> <div id="right-block"> </div> <div id="header"> <h4><a href="/commands/browse" title="commandlinefu.com - the greatest commands on the web"><img src="/images/header-logo.jpg" alt="commandlinefu.com" /></a></h4> <div id="nav"> <strong><a href="/commands/random" title="Lucky dip">Random</a></strong> | <strong><a href="/commands/browse/last-week/sort-by-votes" title="Piping host commands from the last 7 days">Hot this week</a></strong> | <strong><a href="/commands/browse/sort-by-votes" title="See the all-time greatest commands">All-time greats</a></strong> • <strong><a href="/site/faq"><abbr title="Frequently asked questions">FAQ</abbr></a></strong> | <strong><a href="/site/api"><abbr title="API documentation">API</abbr></a></strong> | <strong><a href="/site/widget"><abbr title="Javascript widget">Widget</abbr></a></strong> </div> <div id="search"> <form id="search-form" action="/search/handler" method="post" > <div id="search-container"> <img id="loading" src="/images/tag-loader.gif" style="display:none;float:right;margin: 5px 5px 0 0;" /> <input type="text" id="search-query" class="inactive" name="q" autocomplete="off" value="" placeholder="type here to grep the archive..." /> </div> </form> <div style="display:none" id="search-options"></div> </div> </div> <div id="left-block"> </div> <div id="footer"> <div class="advertising"> </div> </div> </div> --> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $.noConflict(); if (typeof Prototype !== "undefined" && Prototype.BrowserFeatures.ElementExtensions) { var disablePrototypeJS = function (method, pluginsToDisable) { var handler = function (event) { event.target[method] = undefined; setTimeout(function () { delete event.target[method]; }, 0); }; pluginsToDisable.each(function (plugin) { jQuery(window).on(method + '.bs.' + plugin, handler); }); }, pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip', 'popover', 'tab','collect']; disablePrototypeJS('show', pluginsToDisable); disablePrototypeJS('hide', pluginsToDisable); } </script> <script> jQuery( document ).ready(function() { hljs.initHighlightingOnLoad(); hljs.configure({useBR: true}); jQuery('span.code').each(function(i, block) { hljs.highlightBlock(block); }); if (1==0 && window.canRunAds === true) { jQuery('#blocker').hide(); } else { jQuery('#blocker').show(); } }); </script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script src="/js/ads.js"></script> </body> </html>