SampleEntry1
NavyDarkCodeはレスポンシブ対応のシンプルな紺色のテーマです。
以下のような特徴があります。
コードの閲覧
スマートフォンのようなモバイル端末でのコード閲覧時、デフォルトでははみ出た部分が改行されますが、NavyDarkCodeではスクロールになります。また、デスクトップPCでの閲覧時にウィンドウサイズを1200~や1500~のように大きくした場合、横幅を広くとるのでスクロールさせられることが減って読みやすくなります。
コードのファイル名やパスを表示
NavyDarkCodeではコードブロック(pre)の直前にpre-filenameクラスのdivを置くことでコードにファイル名やパスを含めて表示できます。はてな記法の場合は>||の直前の行です。
はてな記法の場合の例
<div class="pre-filename">filename.js</div> >|javascript| //code var x = 3; ||<
タイトル下のグローバルメニュー
タイトル下にカテゴリごとのグローバルメニューを設置したい場合は「デザイン>カスタマイズ>タイトル下>ヘッダ」に以下のようなコードを追加します。
「デザイン>カスタマイズ>タイトル下>ヘッダ」
<div class="category"> <a href="examole.com">Example</a> <a href="examole.com">Example</a> <a href="examole.com">Example</a> <a href="examole.com">Example</a> </div>
SNSシェアボタン
このテーマのSNSシェアボタンを設置したい場合はデフォルトのボタンをOFFにしてから「デザイン>カスタマイズ>記事>記事下」に以下のコードを追加します。
「デザイン>カスタマイズ>記事>記事下」
<ul class="share-buttons"> <li><a href="http://b.hatena.ne.jp/entry/{Permalink}"><i class="blogicon-bookmark"></i></a></li> <li><a href="https://twitter.com/share?url={Permalink}&text={Title}"><i class="blogicon-twitter"></i></a></li> <li><a href="http://www.facebook.com/share.php?u={Permalink}"><i class="blogicon-facebook"></i></a></li> <li><a href="http://getpocket.com/edit?url={Permalink}&title={Title}"><i class="blogicon-chevron-down"></i></a></li> <li><a href="http://line.me/R/msg/text/?{Title} - {BlogTitle} {URLEncodedPermalink}"><i class="blogicon-comment"></i></a></li> </ul>
レスポンシブにする
レスポンシブ対応のテーマをスマホにも適用するには「デザイン>スマートフォン>詳細設定」でレスポンシブデザインにチェックを入れてください。
Sample Entry
これはサンプルエントリーです。
Code Block Sample
これはコードブロックのサンプルです。
code/block/sample.ts
import { TestBed, async } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { AppComponent } from './app.component'; describe('AppComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ RouterTestingModule ], declarations: [ AppComponent ], }).compileComponents(); })); it('should create the app', () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app).toBeTruthy(); }); it(`should have as title 'myapp'`, () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app.title).toEqual('myapp'); }); it('should render title in a h1 tag', () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); const compiled = fixture.debugElement.nativeElement; expect(compiled.querySelector('h1').textContent).toContain('Welcome to myapp!'); }); });