Aplayer Custom element
After setting front matter aplayer: true You got the abilitiy to write Aplayer Custom element in markdown without hexo-tag-aplayer And it is proatble in any environment in which you can write your own html code. 1234567891011121314151617181920212223242526<s-aplayer audio='[ {"name": "光るなら", "artist": "Goose house", "url": "https://blog-static.fengkx.top/svelte-aplayer/hikarunara.mp3", "lrc": "https://blog-static.fengkx.top/svelte-aplayer/hikarunara.lrc", "cover": "https://blog-static.fengkx.top/svelte-aplayer/hikarunara.jpg" }, {"name": "神奇的糊塗魔藥", "artist": "林家謙", "url": "https://blog-static.fengkx.top/svelte-aplayer/margic-sillines.mp3", "lrc": "https://blog-static.fengkx.top/svelte-aplayer/margic-silliness.lrc", "cover": "https://blog-static.fengkx.top/svelte-aplayer/margic-sillines.jpg" }, {"name": "君の知らない物語", "artist": "supercell", "url": "https://blog-static.fengkx.top/svelte-aplayer/bakemonogatari-ed.mp3", "lrc": "https://blog-static.fengkx.top/svelte-aplayer/bakemonogatari-ed.lrc", "cover": "https://blog-static.fengkx.top/svelte-aplayer/bakemonogatari-ed.jpg" }, {"name": "「戦場ヶ原、蕩れ」", "artist": "神前暁", "url": "https://blog-static.fengkx.top/svelte-aplayer/senjougahara.mp3", "cover": "https://blog-static.fengkx.top/svelte-aplayer/senjougahara.jpg" }]'/> HTML above produce You need to set cdn url in theme config file (cdn.aplayer) first checkout the demo repo
Document
Basic concept Hexo is a static Blog Framework. Assuming you have installed Hexo under the guidance of offical Document. You can find a file named_config.yml. Let’s call it site config file. At the same time, You should find a folder named themes, which is used to store Hexo theme. Every folder in themes is a Hexo theme. Every theme should also have a _config.yml. Let’s call it theme config file. Hexo theme is set through the theme property in site config file. It should be the name of a folder in themes folder. Both the site config file and theme config file are using YAML(YAML Ain’t Markup Language). There are some points we should pay attention to. The format is mainly about key-value pair,It is divided by a: . There should be at least one space between colon and value The hierarchical relationship is indicated by indent We can optionally add quotation marks to a string value A line beginning with - is a list item A line beginning with # is a comment For example 12345site: favicon: /images/favicon.ico site_verification: google: 'ABC'# baidu: We can say the propery with value of ABC as site.site_verfication.google Installation There are three things to do Download the theme to themes folder and name it correctly rewrite the theme config file and install the dependencies set the theme property in site config file If you use Git to maintain the source file of your blog,Git submodule is recommended to install the theme。 1git submodule add https://github.com/fengkx/hexo-theme-purer themes/purer After running the command above, purer theme is cloned under themes/purer. And a .gitmodules is generated. You should check out this file in Git too. To avoid conflict, purer theme add _config.yml into .gitignore. For the same reason, I suggest you never change the file inside the theme directly. We can put the real theme config file into the site root directory. 1cp themes/purer/_config.example.yml _config.theme.yml Then we can copy this file into the theme’s root directory when building. We can do this by npm script. Rewrite the scripts part of the package.json in the site root directory. 123456789{ "scripts": { "theme": "cat ./_config.theme.yml > ./themes/purer/_config.yml ", "build": "npm run theme && hexo generate", "clean": "hexo clean", "deploy": "npm run theme && hexo deploy", "server": "npm run theme && hexo server" }} After that, every time we run a npm scripts such as npm run build. The theme config file get updated. It can also achive by a static site host platform with building process support(such as Netlify) or a CI. Then we just set the theme property to purer in the site config file. Try npm run server, You should get a site like this. Updating theme Just run git pull origin master in the theme root directory. Install dependencies Uninstall the dependencies we don’t use. 12npm uninstall hexo-renderer-stylusnpm uninstall hexo-renderer-marked Use markdown-it instead of marked 1npm i -S hexo-renderer-markdown-it hexo-renderer-markdown-it do not generate the anchor of h1, So we need to add some configurations in site config file. 123456789101112markdown: html: true xhtmlOut: true breaks: true langPrefix: linkify: true typographer: quotes: “”‘’ anchors: level: 1 permalink: false separator: '-' For add image using markdown from post_assert_folder 1npm i -S hexo-asset-image For emoji and mathematical formula 12npm i -S markdown-it-emojinpm i -S @iktakahiro/markdown-it-katex We need to load some plugins. End up we got thing like this. 123456789101112131415markdown: html: true xhtmlOut: true breaks: true langPrefix: linkify: true typographer: quotes: “”‘’ anchors: level: 1 permalink: false separator: '-' plugins: - '@iktakahiro/markdown-it-katex' - markdown-it-emoji Page creation The page of [categories, tags, repository, links, about] does not create by default. You need to create a folder inside the source directory with a corresponding name and create an index.md in it. Then set layout in front-matter. Directory structure like this 1234567891011source├── about│ └── index.md├── categories│ └── index.md├── links│ └── index.md├── repository│ └── index.md└── tags └── index.md For example, the index.md under repository folder has content like this. 123456---title: Repositorieslayout: repositorycomments: falsesidebar: none--- 你可以通过front-matter控制是否显示右侧的 sidebar You can also customize 404 page like this. Example directory structure 12345404├── cover.jpg├── happy-time.mp3├── index.md└── lrc.txt Links Links data is sperated with theme,It is stored in 的links.yml under data folder. For example: 1234567891011# linksfengkx0: link: https://www.fengkx.top avatar: https://www.fengkx.top/images/avatar.jpg desc: 测试测试fengkx1: link: https://www.fengkx.top avatar: https://www.fengkx.top/images/avatar.jpg desc: 测试测试 We can see the result in Demo Local search hexo-generator-json-content is needed. 1npm i -S hexo-generator-json-content Theme configuration menu Whether show menu in the header on the left-hand side, Comment out if you don’t need it. menu_icons enable Wether show icon on the left-hand side menu,set to false if you don’t need it. others part is the class of iconfont. Generally, we don’t need to change it. If you want to add new icons, Welcome to post an Issue or change the src/css/iconfont.css file. Icon is provided by Alibaba’s iconfont.cn. site favicon site favicon path,relateive to source or source under the theme root directory. For example /images.fvicon.ico is treated assource/images/favicon.ico. site_verification HTML meta verification provided by Google or Baidu such as 1<meta name="google-site-verification" content="your verification string"> Paset the string in content into the corresponding property. google_analytics Set a track ID provided by Google Analytics. Disabled when empty. pagination prev, next whether always show the button,true by default. Only work when there is more than one page. comment type Choose which comment system to use. Disabled by leave it blanks You can control whether enable comment on a certain post by setting comment: boolean in front-matter. The default value is true. github username GitHub username postCount enable Whether enable. Extra dependency is needed. 1npm i --save hexo-wordcount wordocunt Whether show word count min2read Whether show minutes to read. toc TOC global switch You can controll whether enable toc on a certain post by setting toc: boolean in front-matter. The default value is true. fancybox Whether enable Fancybox image effects based onLightGallery. Enabled by default. license Copyright HTML fragment. Comment out if you don’t want to show Copyright. footer custom Customize Footer HTML fragment. Comment out if you don’t want to show extra footer. A Live Demo Demo source file Source profile enable Whether display profile You can see the effect on Demo Demo 源文件 Source social links links and icons in footer。If you want to add new icon, Welcome to post an Issue. links Links shown in the sidebar of about page labels Labels shown in the sidebar of about page skills Skills shown in the sidebar of about page works Wroks shown in the sidebar of about page widgets widget shown in the sidebar. Comment out to disable show_count Whether show post count at tag, archive,category widget in the sidebar cdn CDN uri,don’t change it if you don’t know what it is.
文档
基本概念 Hexo 是一个静态博客框架。假设你已经按照官方文档安装好了 Hexo。 此时,站点目录下将会有一个_config.yml文件称为站点配置文件。同时还有一个themes目录用于存放主题。themes目录下的每一个文件夹都是一个 Hexo 主题。每个主题文件夹内也有一个_config.yml文件称为主题配置文件。 Hexo 通过指定站点配置文件的theme属性为themes下的文件夹名称指定主题。 站点配置文件和主题配置文件都使用 YAML(YAML Ain’t Markup Language) 格式。该格式有几个特别需要注意的点 格式主要形式是键值对,通过: 分隔键值,冒号后面需要有空格分隔 通过缩进来指示配置层级 字符串值可以有可选的引号 - 开头的为列表项 # 开头的行为注释 例如 12345site: favicon: /images/favicon.ico site_verification: google: 'ABC'# baidu: 下面我们通过用对象取值的方式表示相关的属性。ABC这一属性值可表示为site.site_verfication.google 安装 安装需要做三件事 将主题下载到themes文件夹下并做好命名 改写主题配置文件并安装相应的依赖 在站点配置文件的theme属性指定主题 如果你使用 Git 管理你的博客源文件,推荐你使用Git submodule来安装主题。 1git submodule add https://github.com/fengkx/hexo-theme-purer themes/purer 运行完成后将会在themes/purer下克隆purer主题并生成一个.gitmodules文件。 你应该将这个文件 checkout 到 Git 中。 为了避免冲突问题,purer主题将_config.yml加入到了.gitignore中。为了避免更新主题时出现冲突,建议不要直接改动主题内的文件。 我们可以将真正的主题配置文件放在站点目录下 1cp themes/purer/_config.example.yml _config.theme.yml 然后在构建过程之前将该文件复制到主题的根目录中。我们可以通过npm script来实现。改写站点目录下的package.json的scripts字段。 123456789{ "scripts": { "theme": "cat ./_config.theme.yml > ./themes/purer/_config.yml ", "build": "npm run theme && hexo generate", "clean": "hexo clean", "deploy": "npm run theme && hexo deploy", "server": "npm run theme && hexo server" }} 这样,我们通过npm run build等执行npm scripts时,文件将会自动更新至主题目录中。该方法也可以通过带构建的静态托管网站(例如 Netlify)或者CI实现。 接下来我们只需要在站点配置文件中指定theme为purer 尝试npm run server你应该能看到类似这样的外观。 更新主题 在主题的根目录下git pull origin master即可。 依赖安装 卸载用不到的依赖 12npm uninstall hexo-renderer-stylusnpm uninstall hexo-renderer-marked 使用 markdown-it 1npm i -S hexo-renderer-markdown-it hexo-renderer-markdown-it默认不生成h1的锚点,所以我们需要在站点配置文件添加如下设置 123456789101112markdown: html: true xhtmlOut: true breaks: true langPrefix: linkify: true typographer: quotes: “”‘’ anchors: level: 1 permalink: false separator: '-' 支持从post_assert_folder 用 markdown 引入图片。 1npm i -S hexo-asset-image 支持 emoji 和 数学公式 12npm i -S markdown-it-emojinpm i -S @iktakahiro/markdown-it-katex 我们还需要加载相关的插件,合在一起就是这样的。 123456789101112131415markdown: html: true xhtmlOut: true breaks: true langPrefix: linkify: true typographer: quotes: “”‘’ anchors: level: 1 permalink: false separator: '-' plugins: - '@iktakahiro/markdown-it-katex' - markdown-it-emoji 页面创建 默认情况下 [categories, tags, repository, links, about]页面都不会被创建。你需要在source目录下创建对应名称的目录并创建index.md。并在front-matter中指定layout 目录结构如下 1234567891011source├── about│ └── index.md├── categories│ └── index.md├── links│ └── index.md├── repository│ └── index.md└── tags └── index.md 例如repository页面的index.md内容为 123456---title: Repositorieslayout: repositorycomments: falsesidebar: none--- 你可以通过front-matter控制是否显示右侧的 sidebar 类似的你也可以通过这种方式,自定义404页面。样例目录结构: 12345404├── cover.jpg├── happy-time.mp3├── index.md└── lrc.txt 友链 友链与主题分离,数据存放在数据文件夹的links.yml中 例子: 1234567891011# linksfengkx0: link: https://www.fengkx.top avatar: https://www.fengkx.top/images/avatar.jpg desc: 测试测试fengkx1: link: https://www.fengkx.top avatar: https://www.fengkx.top/images/avatar.jpg desc: 测试测试 效果可以参考Demo 本地搜索 需要安装hexo-generator-json-content 1npm i -S hexo-generator-json-content 主题配置 menu 是否显示左侧 header 中的菜单,如果不需要可以注释掉。 menu_icons enable左侧菜单是否显示图标,如不需要可以设置成false 其他配置项的值为iconfont的class。一般不需要更改,如果你需要新增图标可以提 Issue 或者更改图标可以更改主题的src/css/iconfont.css。图标来自阿里的 iconfont.cn。 site favicon 站点 favicon,相对source或主题根目录下的source 例如/images.fvicon.ico相当于在source/images/favicon.ico中找。 site_verfication Google 或 Baidu 提供的 HTML meta 验证。形如 1<meta name="google-site-verification" content="your verification string"> 将 content 里的内容粘贴到对应的属性中。 google_analytics 在 Google Analytics 找到跟踪 ID(一般是以 UA- 开头)填入。留空不启用。 pagination prev, next 是否总是显示,默认为 true。仅当多于一页时有效。 comment type 选择启用哪一种评论系统。留空则不启用。 你可以通过front-matter的comment: boolean控制具体一篇 post 是否开启评论。默认开启。 github username GitHub username postCount enable 是否启用。需要安装相关的插件 1npm i --save hexo-wordcount wordocunt 是否显示文章字数统计 min2read 是否显示阅读时长预计 toc TOC 全局开关 你可以通过front-matter的toc: boolean控制是否具体一篇 post 是否开启 toc。默认开启。 fancybox 是否开启基于LightGallery图片 FancyBox 效果。默认开启。 license Copyright 显示的 HTML 片段。注释掉则不显示Copyright footer custom 自定义 Footer 的 HTML 片段。注释掉则不显示。 具体例子可参考 Demo Demo 源文件 Source profile enable 是否显示 profile 效果可以参考 Demo Demo 源文件 Source social links Footer 显示的社交联系图标和链接。如需要添加图标可以提 Issue links About 页面侧栏显示的链接 labels About 页面侧栏显示的 Labels skills About 页面侧栏显示的 Skills works About 页面侧栏显示的个人项目 widgets 侧栏显示的 widget, 注释则关闭。 show_count 侧栏的 tag, archive,category widget 中是否显示文章数量 cdn 用到的 CDN 地址,如果你不知道是什么就不要改动。
Code Highlight Style test
Make sure all the code blocks highlighted correctly. All the code samples are come from the demo of https://highlightjs.org 1Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 12345678910111213141516#[derive(Debug)]pub enum State { Start, Transient, Closed,}impl From<&'a str> for State { fn from(s: &'a str) -> Self { match s { "start" => State::Start, "closed" => State::Closed, _ => unreachable!(), } }} 123456789101112[ { "title": "apples", "count": [12000, 20000], "description": {"text": "...", "sensitive": false} }, { "title": "oranges", "count": [17500, null], "description": {"text": "...", "sensitive": false} }] 123456789101112@requires_authorizationdef somefunc(param1='', param2=0): r'''A docstring''' if param1 > param2: # interesting print 'Gre\'ater' return (param2 - param1 + 1 + 0b10l) or Noneclass SomeClass: pass>>> message = '''interpreter... prompt''' 12345678910111213<!DOCTYPE html><title>Title</title><style>body {width: 500px;}</style><script type="application/javascript"> function $init() {return true;}</script><body> <p checked class="title" id='title'>Title</p> <!-- here goes the rest of the page --></body> 123456789101112131415161718192021function $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'); } return ( <div> <web-component>{block}</web-component> </div> )}export $initHighlight; 1234567891011121314#include <iostream>int main(int argc, char *argv[]) { /* An annoying "Hello World" example */ for (auto i = 0; i < 0xFFFF; i++) cout << "Hello, World!" << endl; char c = '\n'; unordered_map <string, vector<string> > m; m["key"] = "\\\\"; // this is an error return -2e3 + 12l;} 123456789101112CREATE TABLE "topic" ( "id" serial NOT NULL PRIMARY KEY, "forum_id" integer NOT NULL, "subject" varchar(255) NOT NULL);ALTER TABLE "topic"ADD CONSTRAINT forum_id FOREIGN KEY ("forum_id")REFERENCES "forum" ("id");-- Initialsinsert into "topic" ("forum_id", "subject")values (2, 'D''artagnian'); 12345678910111213#import <UIKit/UIKit.h>#import "Dependency.h"@protocol WorldDataSource@optional- (NSString*)worldName;@required- (BOOL)allowsToLive;@end@property (nonatomic, readonly) NSString *title;- (IBAction) show;@end 12345678910111213141516/** * @author John Smith <john.smith@example.com>*/package l2f.gameserver.model;public abstract class L2Char extends L2Object { public static final Short ERROR = 0x0001; public void moveTo(int x, int y, int z) { _ai = null; log("Should not be called"); if (1 > 5) { // wtf!? return; } }} 123456789101112131415import Foundation@objc class Person: Entity { var name: String! var age: Int! init(name: String, age: Int) { /* /* ... */ */ } // Return a descriptive string for this person func description(offset: Int = 0) -> String { return "\(name) is \(age + offset) years old" }} 123456789101112131415@font-face { font-family: Chunkfive; src: url('Chunkfive.otf');}body, .usertext { color: #F0F0F0; background: #600; font-family: Chunkfive, sans;}@import url(print.css);@media print { a[href^=http]::after { content: attr(href) }} 12345678910111213# The Greeter classclass Greeter def initialize(name) @name = name.capitalize end def salute puts "Hello #{@name}!" endendg = Greeter.new("world")g.salute 12345678910111213# MakefileBUILDDIR = _buildEXTRAS ?= $(BUILDDIR)/extras.PHONY: main cleanmain: @echo "Building main facility..." build_main $(BUILDDIR)clean: rm -rf $(BUILDDIR)/* 123456789101112package mainimport "fmt"func main() { ch := make(chan float64) ch <- 1.0e10 // magic number x, ok := <- ch defer fmt.Println(`exitting now\`) go println(len("hello world!")) return} 123456789101112131415#!/bin/bash###### CONFIGACCEPTED_HOSTS="/root/.hag_accepted.conf"BE_VERBOSE=falseif [ "$UID" -ne 0 ]then echo "Superuser rights required" exit 2figenApacheConf(){ echo -e "# Host ${HOME_DIR}$1/$2 :"} 123456789101112; boilerplate[package]name = "some_name"authors = ["Author"]description = "This is \a description"[[lib]]name = ${NAME}default = Trueauto = nocounter = 1_000
Markdown Style test
This post is originated from here and is used for testing markdown style. This post contains nearly every markdown usage. Make sure all the markdown elements below show up correctly. Headers 1234567891011121314# H1## H2### H3#### H4##### H5###### H6Alternatively, for H1 and H2, an underline-ish style:Alt-H1======Alt-H2------ H1 H2 H3 H4 H5 H6 Alternatively, for H1 and H2, an underline-ish style: Alt-H1 Alt-H2 Emphasis 1234567Emphasis, aka italics, with *asterisks* or _underscores_.Strong emphasis, aka bold, with **asterisks** or __underscores__.Combined emphasis with **asterisks and _underscores_**.Strikethrough uses two tildes. ~~Scratch this.~~ Emphasis, aka italics, with asterisks or underscores. Strong emphasis, aka bold, with asterisks or underscores. Combined emphasis with asterisks and underscores. Strikethrough uses two tildes. Scratch this. Lists 123456789101112131415161718192021221. First ordered list item2. Another item * Unordered sub-list.1. Actual numbers don't matter, just that it's a number 1. Ordered sub-list4. And another item. You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown). To have a line break without a paragraph, you will need to use two trailing spaces. Note that this line is separate, but within the same paragraph. (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)* Unordered list can use asterisks- Or minuses+ Or pluses- Paragraph In unordered list For example like this.Common Paragraph with some text.And more text. First ordered list item Another item Unordered sub-list. Actual numbers don’t matter, just that it’s a number Ordered sub-list And another item. You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we’ll use three here to also align the raw Markdown). To have a line break without a paragraph, you will need to use two trailing spaces. Note that this line is separate, but within the same paragraph. (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.) Unordered list can use asterisks Or minuses Or pluses Paragraph In unordered list For example like this. Common Paragraph with some text. And more text. Inline HTML 1<p>To reboot your computer, press <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>.</p> To reboot your computer, press ctrl+alt+del. 1234567<dl> <dt>Definition list</dt> <dd>Is something people use sometimes.</dd> <dt>Markdown in HTML</dt> <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd></dl> Definition list Is something people use sometimes. <dt>Markdown in HTML</dt> <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd> Links 1234567891011121314151617[I'm an inline-style link](https://www.google.com)[I'm an inline-style link with title](https://www.google.com "Google's Homepage")[I'm a reference-style link][Arbitrary case-insensitive reference text][I'm a relative reference to a repository file](../blob/master/LICENSE)[You can use numbers for reference-style link definitions][1]Or leave it empty and use the [link text itself]Some text to show that the reference links can follow later.[arbitrary case-insensitive reference text]: https://hexo.io[1]: https://hexo.io/docs/[link text itself]: https://hexo.io/api/ I’m an inline-style link I’m an inline-style link with title I’m a reference-style link I’m a relative reference to a repository file You can use numbers for reference-style link definitions Or leave it empty and use the link text itself Some text to show that the reference links can follow later. Images 12345678910hover to see the title text:Inline-style:Reference-style:![alt text][logo][logo]: https://hexo.io/icon/favicon-196x196.png "Logo Title Text 2" hover to see the title text: Inline-style: Reference-style: Code and Syntax Highlighting Inline code has back-ticks around it. 12var s = "JavaScript syntax highlighting";alert(s); 12s = "Python syntax highlighting"print s 12No language indicated, so no syntax highlighting.But let's throw in a <b>tag</b>. Tables 12345| |ASCII |HTML ||----------------|-------------------------------|-----------------------------||Single backticks|`'Isn't this fun?'` |'Isn't this fun?' ||Quotes |`"Isn't this fun?"` |"Isn't this fun?" ||Dashes |`-- is en-dash, --- is em-dash`|-- is en-dash, --- is em-dash| ASCII HTML Single backticks 'Isn't this fun?' ‘Isn’t this fun?’ Quotes "Isn't this fun?" “Isn’t this fun?” Dashes -- is en-dash, --- is em-dash – is en-dash, — is em-dash Colons can be used to align columns. 12345| Tables | Are | Cool || ------------- |:-------------:| -----:|| col 3 is | right-aligned | || col 2 is | centered | || zebra stripes | are neat | Tables Are Cool col 3 is right-aligned col 2 is centered zebra stripes are neat The outer pipes (|) are optional, and you don’t need to make the raw Markdown line up prettily. You can also use inline Markdown. 1234Markdown | Less | Pretty--- | --- | ---*Still* | `renders` | **nicely**1 | 2 | 3 Markdown Less Pretty Still renders nicely 1 2 3 You can find more information about LaTeX mathematical expressions here. Blockquotes Blockquotes are very handy in email to emulate reply text. This line is part of the same quote. Quote break. This is a very long line that will still be quoted properly when it wraps. Oh boy let’s keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote. Horizontal Rule Three or more… 1234567891011---Hyphens***Asterisks___Underscores Hyphens Asterisks Underscores Line Breaks 123456Here's a line for us to start with.This line is separated from the one above by two newlines, so it will be a *separate paragraph*.This line is also a separate paragraph, but...This line is only separated by a single newline, so it's a separate line in the *same paragraph*. Here’s a line for us to start with. This line is separated from the one above by two newlines, so it will be a separate paragraph. This line is also a separate paragraph, but… This line is only separated by a single newline, so it’s a separate line in the same paragraph. 123456789This is a regular paragraph.<table> <tr> <td>Foo</td> </tr></table>This is another regular paragraph. This is a regular paragraph. Foo This is another regular paragraph. Youtube videos 1234567<a href="https://www.youtube.com/watch?feature=player_embedded&v=ARted4RniaU" target="_blank"><img src="https://img.youtube.com/vi/ARted4RniaU/0.jpg"alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>Pure markdown version:[](https://www.youtube.com/watch?v=ARted4RniaU) Pure markdown version:
Excerpts
The following contents should be invisible in home/archive page. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget urna vitae velit eleifend interdum at ac nisi. In nec ligula lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eu cursus erat, ut dapibus quam. Aliquam eleifend dolor vitae libero pharetra adipiscing. Etiam adipiscing dolor a quam tempor, eu convallis nulla varius. Aliquam sollicitudin risus a porta aliquam. Ut nec velit dolor. Proin eget leo lobortis, aliquam est sed, mollis mauris. Fusce vitae leo pretium massa accumsan condimentum. Fusce malesuada gravida lectus vel vulputate. Donec bibendum porta nibh ut aliquam. Sed lorem felis, congue non fringilla eu, aliquam eu eros. Curabitur orci libero, mollis sed semper vitae, adipiscing in lectus. Aenean non egestas odio. Donec sollicitudin nisi quis lorem gravida, in pharetra mauris fringilla. Duis sit amet faucibus dolor, id aliquam neque. In egestas, odio gravida tempor dictum, mauris felis faucibus purus, sit amet commodo lacus diam vitae est. Ut ut quam eget massa semper sodales. Aenean non ipsum cursus, blandit lectus in, ornare odio. Curabitur ultrices porttitor vulputate.
Tag Plugins
This post is used for testing tag plugins. See docs for more info. Block Quote Normal blockquote Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna. Quote from a book Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy. David LevithanWide Awake Quote from Twitter NEW: DevDocs now comes with syntax highlighting. http://devdocs.io @DevDocstwitter.com/devdocs/status/356095192085962752 Quote from an article on the web Every interaction is both precious and an opportunity to delight. Seth GodinWelcome to Island Marketing Code Block Normal code block 1alert('Hello World!'); With caption Array.map1array.map(callback[, thisArg]) With caption and URL .compactUnderscore.js12.compact([0, 1, false, 2, ‘’, 3]);=> [1, 2, 3] With marked lines Line 1,7-8,10 should be marked with different color. 1234567891011const http = require('http');const hostname = '127.0.0.1';const port = 1337;http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/plain' }); res.end('Hello World\n');}).listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`);}); Note: Theme’s style should support .highlight.line.marked (recommend to use the selection or current line color). Gist jsFiddle Pullquote Left Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus molestie arcu, et fringilla mauris placerat ac. Nullam luctus bibendum risus. Ut cursus sed ipsum feugiat egestas. Suspendisse elementum, velit eu consequat consequat, augue lorem dapibus libero, eget pulvinar dolor est sit amet nulla. Suspendisse a porta tortor, et posuere mi. Pellentesque ultricies, mi quis volutpat malesuada, erat felis vulputate nisl, ac congue ante tortor ut ante. Proin aliquam sem vel mauris tincidunt, eget scelerisque tortor euismod. Nulla tincidunt enim nec commodo dictum. Mauris id sapien et orci gravida luctus id ut dui. In vel vulputate odio. Duis vel turpis molestie, scelerisque enim eu, lobortis eros. Cras at ipsum gravida, sagittis ante vel, viverra tellus. Nunc mauris turpis, elementum ullamcorper nisl pretium, ultrices cursus justo. Mauris porttitor commodo eros, ac ornare orci interdum in. Cras fermentum cursus leo sed mattis. In dignissim lorem sem, sit amet elementum mauris venenatis ac. Right Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula justo, lobortis sit amet semper vel, dignissim sit amet libero. Praesent ac tempus ligula. Maecenas at gravida odio. Etiam tristique volutpat lacus eu faucibus. Donec non tempus arcu. Phasellus adipiscing, mauris nec mollis egestas, ipsum nunc auctor velit, et rhoncus lorem ipsum at ante. Praesent et sem in velit volutpat auctor. Duis vel mauris nulla. Maecenas mattis interdum ante, quis sagittis nibh cursus et. Nulla facilisi. Morbi convallis gravida tortor, ut fermentum enim gravida et. Nunc vel dictum nisl, non ultrices libero. Proin vestibulum felis eget orci consectetur lobortis. Vestibulum augue nulla, iaculis vitae augue vehicula, dignissim ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel pharetra elit.
Elements
The purpose of this post is to help you make sure all of HTML elements can display properly. If you use CSS reset, don’t forget to redefine the style by yourself. Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Paragraph Lorem ipsum dolor sit amet, test link consectetur adipiscing elit. Strong text pellentesque ligula commodo viverra vehicula. Italic text at ullamcorper enim. Morbi a euismod nibh. Underline text non elit nisl. Deleted text tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie. Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus, elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus scelerisque nunc sed nunc ultricies accumsan. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed erat diam, blandit eget felis aliquam, rhoncus varius urna. Donec tellus sapien, sodales eget ante vitae, feugiat ullamcorper urna. Praesent auctor dui vitae dapibus eleifend. Proin viverra mollis neque, ut ullamcorper elit posuere eget. Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna. Maecenas ornare arcu at mi suscipit, non molestie tortor ultrices. Aenean convallis, diam et congue ultricies, erat magna tincidunt orci, pulvinar posuere mi sapien ac magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vitae placerat mauris. Nullam laoreet ante posuere tortor blandit auctor. Sed id ligula volutpat leo consequat placerat. Mauris fermentum dolor sed augue malesuada sollicitudin. Vivamus ultrices nunc felis, quis viverra orci eleifend ut. Donec et quam id urna cursus posuere. Donec elementum scelerisque laoreet. List Types Definition List (dl) Definition List TitleThis is a definition list division. Ordered List (ol) List Item 1 List Item 2 List Item 3 Unordered List (ul) List Item 1 List Item 2 List Item 3 Checkbox List (ul) [ ] List Item 1 unchecked [x] List Item 2 checked [X] List Item 3 checked Table Table Header 1 Table Header 2 Table Header 3 Division 1 Division 2 Division 3 Division 1 Division 2 Division 3 Division 1 Division 2 Division 3 Misc Stuff - abbr, acronym, sub, sup, kbd, etc. Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE. Use Crtl + C to stop.