2018-11-13

HEXOでコードの書き方いろいろ実験

Hexo
Blog
Markdown


Hexoはジェネレート時にhighlight.jsを適用してくれます。
クライアントサイドでのレンダーではないので、軽いのが嬉しいです。

今回はいろいろMarkdownの書き方を実験してみました。

HTMLコードの掲載

``` html  
<html>  
	<head>  
		<title>オレのブログ</title>  
	</head>  
	<body>  
		<h1>コンテンツをここに</h1>  
		<P>ローレンイプサム的ななにか  
	</body>  
</html>  
```  

<html>  
	<head>  
		<title>オレのブログ</title>  
	</head>  
	<body>  
		<h1>コンテンツをここに</h1>  
		<P>ローレンイプサム的ななにか  
	</body>  
</html>  

JSコードの掲載

``` JavaScript  
// 普通に問題ない。  
!function() {  
	console.log('OK');  
}()  
```  

// 普通に問題ない。  
!function() {  
	console.log('OK');  
}()  

CSS(LESS)コードの掲載

``` LESS  
// 問題なかった。  
.parent {  
	.child {  
		background: #FFF;  
	}  
}  
```  

// 問題なかった。  
.parent {  
	.child {  
		background: #FFF;  
	}  
}  

画像の表示

公式の方法だとpermalink設定に依存するし、なんかなぁ。。。

  • source/images/ディレクトリを作成
  • その中に更に記事ごとのディレクトリを作成
  • 記事からは絶対パスで記述
  • [デメリット]ドラフト扱いができないのでデプロイされちゃう

    ![](./cat.png)  

    猫

Markdownの掲載

Markdown記法のバッククォートを載せたいときは、知ってしまえば大したことではなかった。
一番長く連続するバッククォートよりもさらに長いバッククォートで囲う。
コードはバッククォート3つだと思うが、それを表示したければ4つのバッククォートで囲う。

```` md  
``` md  
![猫](./cat.png)  
```  
````  

結果↓

``` md  
![](./cat.png)  
```  

まとめ

いろいろやってみて、困ったことはありませんでした。
コード載せるのは簡単ですが、動作するコードを貼り付けるのにうまいことできないかなと模索中。


猫派 / 基本インドア / ガジェット大好き / RDP推進派
コロナ禍の趣味はPC+VRでゲーム。
最近のゲーム:Factorio / BeatSaber / にゃんこ大戦争

→ Policy