はてぶでコードを紹介するにはGithubGistを使えば捗る

はてぶでちょこちょこソースコードを紹介していましたが、こんな感じで非常に読みづらい状態になってました。

<template>
<div>
  コード表示のtest(´・ω・`)bd(๑òωó๑)۶
</div>
</template>

<script>
export default{
  name: 'test',
  data () {
    return {
      test: '(´・ω・`)b'
    }
  }
}
</script>
<style>
.test{
  color: red;
}
</style>

コード行数も出ない。シンタックスも効かない。読みにくい。。。

GithubGistを使ってソースコードの表示をもっと読みやすく

Githubは長年使っておりましたが、今回はじめてGistを触りました。 gist.github.com 表示されているform上にソースコードを書いて「Create public gist」ボタンを押すだけで、公開できます。
(さすがgithubだけあって、ソースコードを直に書いてもインデントとかが効くので、非常に書きやすいです。)

はてぶに貼り付ける

はてぶにはGist連携があり、それを使うと便利です。 記事編集画面のサイドバー[＋]を押すと、各種連携が表示されます。
その中に「Gist貼り付け」という項目があるので、onにします。
するとOctocatアイコンが表示されますのでクリックして、自分のgithubユーザ名を入力します。
あとははてぶに掲載したいGistを選んで記事に貼り付けるだけです。
こんな感じになります。
testing gist

まぁまぁ読みやすくなった？ とりあえずコード書く時はこれでいく。