はてなブログ(Beta)で、ソースコードを書く

Web関連

記事作成日：2013年1月18日

はてなブログでソースコードを含んだ記事を書くにはどうすればいいのかなーと思って調べてみると、どうやら「はてな記法」というものがあるらしく、その記述をすればソースコードとして表示させる事が可能らしい事が分かったので、試してみます。

まず、はてなブログのダッシュボードでの「設定」から編集モードを「はてな記述モード」に変更します。
f:id:evolutor:20130118203859j:plain

これで、下記にあるようなはてな記法を使う事ができるようになります。

[ はてな記法一覧 ]
http://hatenadiary.g.hatena.ne.jp/keyword/%E3%81%AF%E3%81%A6%E3%81%AA%E8%A8%98%E6%B3%95%E4%B8%80%E8%A6%A7

試しにHTMLコードを書いてみます。

<html>
<head>
    <title>ほげ</title>
</head>
<body>
<h1>hoge</h1>
</body>
</html>

CSSだとこんな感じ。

@charset "utf-8";
*{
margin: 0;
padding: 0;
}
body{
font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color: #252525;
font-size: 95%;
font-weight: normal;
line-height: 1.5;
}
article.hoge{
clear: both;
position: relative;
}

JavaScriptだとこんな感じになるようです。

var jsonPath = '#';
var jsonData = "";
function onLoadJson(){
var request = $.ajax({
type: "get",
url: jsonPath,
dataType: 'json'
});
request.done(function(_json) {
jsonData = json.data;
console.log(jsonData);
});
request.fail(function(_xhr, _textStatus, _errorThrown) {
console.log('>> error!!');
console.log(_xhr);
console.log(_textStatus);
console.log(_errorThrown);
alert('ごめん。何かエラった(´・ω・｀)');
});
}

ついでにPHP。

<?php
function connect($sql){
$host = "localhost";
$user = "root";
$pass = "";
$db = "hoge";
$con = mysql_connect($host, $user, $pass);
$sel = mysql_select_db($db, $con);
mysql_query("set names utf8");
$rst = mysql_query($sql, $con);
return $rst;
mysql_free_result($rst);
mysql_close($con);
}
?>

HTMLは即席で適当に作ったものですが、CSS、JS、PHPはローカルに持ってたやつを適当に引っ張りだして、部分的に変更して書いてます。
特に意味はありません。

まあ、そんな感じです。

関連