give & not take

日々、幸せに生きるために。。。

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

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

<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 f:id:gaku3601:20181113072347p:plain 表示されているform上にソースコードを書いて「Create public gist」ボタンを押すだけで、公開できます。
(さすがgithubだけあって、ソースコードを直に書いてもインデントとかが効くので、非常に書きやすいです。)

はてぶに貼り付ける

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

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