はなゐろぐ

Tag: CSS

HEXOとhighlight.jsでシンタックスハイライトし、ついでにファイル名も表示する

2019.10.29 14:10

Qiitaのように、コードブロックにファイル名も表示します。HEXOが前提ですが、他のMarkdown記法のものなら応用がきくんじゃないでしょうか。

highlight.jsを読み込む

任意の場所でスクリプト本体とテーマCSSを読み込みます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/rainbow.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>

テーマCSSのデモはhighlight.js demoにあります。

また、highlight.min.jsはデモの「common」カテゴリの言語のみ対応のようなので、必要に応じてcdnjs.comから追加するとよいでしょう。例えばSCSSは含まれていないので、追加で読み込む必要があります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/languages/scss.min.js"></script>

モジュールとして読み込むこともできます。ドキュメントを見るに、言語を選んでコンパイルすることもできるようなので、環境によってはこっちのほうが良さそう。

コードブロックを書く

普通にコードブロックを記述します。ファイル名を表示したい場合は言語名のあとにコロンでつなげます。逆に何も指定しなくてもhighlight.jsが自動で言語を認識してくれます。

```php:functions.php
ここにコード
(後略)

すると、こんな感じで出力されると思います。

<pre><code class="php:functions.php">ここにコード(後略)</code></pre>

highlight.jsを使うには、言語名だけのクラス(ここではphp)にする必要があるので、Javascriptでなんとかします。クラスがなくても自動判定してくれるのですが、一応。

コードブロックのクラスを変更する

とりあえずこんな感じです。DOMContentLoadedのタイミングでページ内のクラス付きcode要素に対し、コロンがついていればそこで文字列を分割してクラスとdata属性にセットします。あとはhighlight.jsがよしなにしてくれます。

document.addEventListener('DOMContentLoaded', () => {
  // code要素にファイル名などを付与する
  var codes = document.querySelectorAll('code');
  if(codes){
    Array.prototype.slice.call(codes).forEach(function(item) {
      // クラスを取得
      var classes = item.classList;
      if(classes.length > 0){
        // ファイル名があればdata属性にセット
        if(classes[0].indexOf(':')){
          var values = classes[0].split(':');
          var filename = values[1];
          if(filename) item.setAttribute('data-filename', filename);
          // ファイル名を削除して言語クラスに変更する
          item.classList.remove(classes[0]);
          item.classList.add(values[0]);
        }
      }
    });
  }
});

// highlight.jsによるシンタックスハイライト
hljs.initHighlightingOnLoad();

コードブロックにファイル名を表示させる

コードブロックにdata-filename属性を付与したので、それをもとにCSSを書きます。

.hljs {
  position: relative;
  border-radius: 2px;
  overflow: hidden;

  &[data-filename] {
    // ファイル名を表示する時だけ上に余白をあける
    padding-top: 1.8em;

    // 疑似要素にファイル名を表示
    &::before {
      content: attr(data-filename);
      position: absolute;
      top: 0;
      right: 0;
      padding: 0 .3em;
      color: $font-color-default;
      font-size: .93em;
      background-color: rgba(#fff, .8);
      border-bottom-left-radius: 2px;
    }
  }
}

以上です!

Sassのmapを使って同じようなCSSを一括作成

2019.06.24 22:06

mapとは、Javascriptでいう連想配列のようなもので、キーと値をセットで定義することができる変数です。普通の変数と違って何がよいかというと、ループして同じような処理を自動でできるようになります。

たとえば色違いの項目をたくさん作る必要がある場合、Sassに書くルールは1つでよく、パターンを増やすにも変数を1行増やすだけでいいので管理しやすくとても楽。

$map: (
  1: #ce5a24,
  2: #2f99ac,
  3: #9e272d
);

.hoge{
  &__item{
    @each $n, $color in $map{
      @at-root #{&}:nth-child(#{$n}){
        background-color: $color;
      }
    }
    }
}

この例でいうと、$nにキー(変数の左側)、$colorに値(変数の右側)が代入されます。この2つはわかりやすい任意の文字列で大丈夫。

$map: (
  hokkaido: #6cb041,
  tohoku: #d98d66,
  kanto: #6537a8,
  kansai: #e43474,
  chushikoku: #5d94a4,
  kyushu: #a63914
);

.section{
  @each $key, $color in $map{
    @at-root #{&}-#{$key}{
      color: $color;
      background-image: url(/path/to/bg_#{$key}.jpg);
    }
  }
}

mapに限った話ではないですが、Sassでは変数を#{$key}と囲うことで、ファイルパスやセレクタに使うこともできます。

簡単なカラムmixin

2018.10.11 21:10

サムネイルやカードを並べるのによく使うやつです。

@mixin col(
  $column-count, // カラム数
  $gutter: 10px, // 間の余白
  $inverse: false, // true->右から左へ、false->左から右へ
  $selector: '> *' // 子要素のセレクタ
){
  @include clearfix;
  $direction: if($inverse, right, left);

  #{$selector}{
    // 余白を一旦リセット
    margin-left: 0;
    margin-top: 0;
    float: $direction;
    @if $gutter != 0{
      $margins: $gutter * ($column-count - 1);

      width: calc((100% - #{$margins}) / #{$column-count});
      // 左右の余白
      + *:not(:nth-child(#{$column-count}n+1)){
        margin-#{$direction}: #{$gutter};
      }
      // 上下の余白
      &:not(:nth-child(-n+#{$column-count})){
        margin-top: #{$gutter};
      }
    }
    @else{
      width: calc(100% / #{$column-count});
    }
  }
}
1