Scribbled Offhand: Bloggerでコードを表示する方法について

なんだかんだで手作業でコードからHtmlへ変換する形が一番しっくりくるかも

利用しているサイト

手順
①上のサイトでコードを貼り付け
②変換
③Html部分をコピー
④Bloggerの投稿画面でHtml編集で、貼り付け

CSS

/* Source Code CSS */
pre.code {
    font-size: 12px;
    /* line-height:1.2em; */
    border:1px solid #aaa;
    background:#f0f0f0;
    padding:0.5em; 
    overflow: auto;
}
pre.code span.tag  { color: #0000ff;  }
pre.code span.attr       { color: #000;     }
pre.code span.value      { color: #900;     }
pre.code span.str     { color: #009900;     }
pre.code span.num     { color: #009900;     }
pre.code span.keyword { color: #0000ff;    }
pre.code span.rem  { color: #909;         }
pre.code span.variable  { color: #500050;   }

JavaScripts

//Scamperをクリックされたとき
        $('.SelectScamper').click(function( ) {
            $('.SelectScamper').removeClass("btn-success");
            $(this).addClass("btn-success");

            var e = $(this).children('p:eq(1)');
            //console.log(e.text());
            $('#SelectedScamper').text(e.text());
            $("#tweetBeforeScamperWord").val(e.text());
            countTweetNumber();
        });

        //文字を変更されたとき
        $("#tweet").bind("change keyup",function(){
            countTweetNumber();
        });

HTML

<!doctype html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTDxhtml11.dtd">
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set     -->
<!-- the browser's rendering engine into           -->
<!-- "Quirks Mode". Replacing this declaration     -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout.   -->

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" >
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Hello App Engine</title>
  </head>

  <body>
    <h1>GoogleAppEngine初めてのサーブレット</h1>
    
    <table summary="">
      <tr>
        <td colspan="2" >Available Servlets:</td>        
      </tr>
      <tr>
        <td><a href="/login.jsp"/>login</td>
      </tr>
      <tr>
        <td><a href="/tashittermain"/>MAIN</td>
      </tr>
      <tr>
        <td><a href="/logview"/>logview</td>
      </tr>
      <tr>
        <td><a href="/TwitterWordsLog.jsp"/>TwitterWordsLog</td>
      </tr>
      <tr>
        <td><a href="/PostTest.jsp"/>PostTest</td>
      </tr>
      <tr>
        <td><a href="/mainview"/>Servlet→JSP</td>
      </tr>
    </table>
  </body>
</html>

Scribbled Offhand

2012年5月8日火曜日

Bloggerでコードを表示する方法について

0 件のコメント :

コメントを投稿