google blogger技巧-谷博小技-google blogger hacks

以前就想寫關于blogger技巧的文章，可是blogger的文章中用常規方式無法加入代碼。于是我就用google pages放代碼，可是不太方便，今天終于找到解決的辦法了。 There's a couple different ways to display code in your posts. 共有4種不同的方式在妳的blogger beta的文章中顯示代碼。 1) The first is just adding it directly to your post

I find this way very ugly :( 2) The 2nd way is to use a <textarea> <textarea readonly="readonly"><span style="background-border:1px dotted purple;">This is for testing purposes only. Get it. Got it? Good.</span></textarea> This is a little better but doesn't keep any formatting, it just lumps all the code together :( 3) A 3rd way is very similar to using a <textarea>, but this uses a styled <div> Again, this doesn't keep any formatting :( 4) Finally, we can also use a styled <pre> tag

<pre style="width:400px;height:150px;overflow:auto;">
<span style="background-border:1px dotted purple;">This is for testing purposes only. Get it. Got it? Good.</span>
</pre>

This does keep the formatting, and is my favorite way to do it :) Notes: When displaying HTML code you'll want to change < to &lt; and > to &gt; (the easiest way to do this is to use the find & replace option in your favorite text editor) The relevant styling rules involve setting a fixed height, a fixed width, and the overflow property to auto. For the examples here, I also set a background color and a purple border... just to make it a little clearer (as if you couldn't tell :P )