プロフィール
2017.11.20
プロフィールのページを設けました。

このブログについて(About Blog)も

記載されています。

初めに必ずご一読下さいますよう

よろしくお願い致します。
2017.11.20 05:39 | 固定リンク | ブログのこと

Copyrightを表記する
2017.11.17
ブログを開設したので
コピーライトを表記したいと思いました。

Copyright(コピーライト)とは、著作権という意味です。

よくブログの下の方に書かれている表示です。

調べてみると、
特に記述する必要はないらしいのですが、

まっ、一応という事で書こうと思いました・・

・・が・・

2017年ももうすぐ終わります。

すぐに年号を
書き換える事になるのは
正直面倒くさいな・・と思い
調べたところ、こんな物を見つけました。

JavaScriptで、
年号を取得してしまおうというもの、
これなら年号を書き換える必要はありませんね。

<!--▽コピーライト表記-->
<div style="font-weight:bold; font-size:50%;">
Copyright (C) <script type="text/javascript">document.write(new Date().getFullYear());</script>,<a href="ブログのURL">ブログ名</a> All Rights Reserved.
</div>
<!--コピーライト表記 ここまで△-->


※ 上記の <> (全角)は < > (半角)に替えてください。



↓このように表示されます。


Copyright (C) ,ブログ名 All Rights Reserved.





<!--▽コピーライト表記-->
Copyright (C) 2010<script>new Date().getFullYear()>2010&&document.write("-"+new Date().getFullYear());</script>,<a href="ブログのURL">ブログ名 All Rights Reserved.
<!--コピーライト表記 ここまで△-->


※ 上記の <> (全角)は < > (半角)に替えてください。



↓このように表示されます。


Copyright (C) 2010,ブログ名 All Rights Reserved.





Copyright の (C) は© &copyや © &#169などでもOKです。



皆さまのご参考になれば幸いです。

Highlight.jsの実装
2017.11.12
シンタックスハイライトとは、
テキストエディタなどの文字表示に関する機能の一つで、
あらかじめ指定された文中の特定の記号や
キーワードなどを他とは異なる色で表示すること。
色を変える以外にも、異なるフォントを用いたり、
太字や斜体、下線などの装飾を施す場合もある。


ソースコードを見やすくハイライトしてくれる
シンタックスハイライト、
自身のブログで使う事はないかなと思いましたが、

少し気になって調べてみましたら、
数種類ヒットしました。

その中でも軽量かつ実装しやすいと言われている
highlight.jsを当ブログに導入してみました。

function $initHighlight(block, cls) {
try {
if (cls.search(/\bno\-highlight\b/) != -1)
return process(block, true, 0x0F) +
` class="${cls}"`;
} catch (e) {
/* handle exception */
}
for (var i = 0 / 2; i < classes.length; i++) {
if (checkCondition(classes[i]) === undefined)
console.log('undefined');
}
}
export $initHighlight;


↑ JavaScriptのサンプルコードです。

とても見やすいしカッコイイです。

導入方法ですが、

CDN ホストから読み込む方法があります。

ソースを<head>内あるいは</body>の直上に記述します。

読み込んだソースを実行するスクリプトを記述します。

<script>!--ここにコードを書く--</script>

“script” と “/script” 間に

以下を書き込み、

hljs.initHighlightingOnLoad();


読み込んだソースの直後に記述します。

これで、
あとは実際にコードを書いてみます。

このように

<pre><code>!--ここにコードを書く--</code></pre>


でソースを囲むことでタグ内のコードがハイライトされます。

※ 上記の <> (全角)は < > (半角)に替えてください。


言語を指定する場合は (htmlの例)

<pre><code class="html">!--ここにコードを書く--</code></pre>


※ 上記の <> (全角)は < > (半角)に替えてください。


ハイライトさせない場合は


<pre><code class="nohighlight">!--ここにコードを書く--</code></pre>


※ 上記の <> (全角)は < > (半角)に替えてください。


注意点として
“<“、”>”はエスケープ必須です。

“<“、”>”は、“&lt;”、“&gt;”で置き換えないと、
コードの一部として認識されてしまいます。


これがちょっと使いづらい点でもありますが、
そんなに頻繁にコードを出さないですし、

ちょうどよいのかな?と思います。

カスタマイズとして
スタイルを変更できます。

highlight.js demoページの
Stylesからお好みのスタイルを見つけたら

styles directory

選択したデザインと同名のcssを見つけて、
読み込むcssを変更します。

例えばandroidstudio.cssを選び、
cdnjsを使用した場合は、

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/androidstudio.min.css">


※ 上記の <> (全角)は < > (半角)に替えてください。


".css"の前に ".min"を追加することを忘れないでください。

皆さまの参考となれば幸いです。

※ コードの

<> (全角)は < > (半角)に

替える事ついて。

当ブログでは
エスケープした文字を含むコードが
うまく表示されません。

&lt;!DOCTYPE html&gt;

&lt;title&gt;Title&lt;/title&gt;

&lt;style&gt;body {width: 500px;}&lt;/style&gt;

&lt;script type="application/javascript"&gt;
  function $init() {return true;}
&lt;/script&gt;

&lt;body&gt;
  &lt;p checked class="title" id='title'&gt;Title&lt;/p&gt;
  &lt;!-- here goes the rest of the page --&gt;
&lt;/body&gt;


↑ htmlのサンプルコードです。

&lt;、&gt; がそのまま表示されています。

色々と試しましたが改善されません。

ご理解頂きますよう
よろしくお願い致します。
Copyright (C) ,FOUR 4to6 All Rights Reserved.

- CafeNote -