<!DOCTYPE html> <html ⚡> <head> <meta charset="utf-8"> <link href="https://photo-tea.com/p/hexo-markdown-notation/" rel="canonical"> <title>【一覧】markdownの記法まとめ・hexoで記事を書く方法(プラグインや独自タグ定義解説あり) - TPB</title> <meta content="width=device-width,minimum-scale=1,initial-scale=1" name="viewport"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style> <noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <script async src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js" custom-element="amp-sidebar"></script> <script async src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js" custom-element="amp-social-share"></script> <script async src="https://cdn.ampproject.org/v0/amp-vimeo-0.1.js" custom-element="amp-vimeo"></script> <script async src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js" custom-element="amp-youtube"></script> <script async src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js" custom-element="amp-twitter"></script> <script async src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js" custom-element="amp-instagram"></script> <script async src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" custom-element="amp-iframe"></script> <script async src="https://cdn.ampproject.org/v0/amp-ad-0.1.js" custom-element="amp-ad"></script> <script async src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" custom-element="amp-analytics"></script> <script async src="https://cdn.ampproject.org/v0.js"></script> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "BlogPosting", "headline": "【一覧】markdownの記法まとめ・hexoで記事を書く方法(プラグインや独自タグ定義解説あり)", "description": "markdownの書き方の解説やブログジェネレータであるHexoで使える記法をまとめてみました。見出し(h1)やテーブル(table)、リンク(link)、画像(iamge)など代表的なものから順番に説明していきたいと思います。", "mainEntityOfPage":{ "@type":"WebPage", "@id":"https://photo-tea.com/p/hexo-markdown-notation/" }, "datePublished": "2016-03-01T11:54:41.000Z", "dateModified": "2017-05-10T01:28:58.000Z", "image": { "@type": "ImageObject", "url": "https://farm5.staticflickr.com/4154/5022680244_8a34b71159_b.jpg", "width" : "1024", "height" : "681" }, "author": { "@type": "Person", "name": "tea" }, "publisher": { "@type": "Organization", "name": "TPB" , "logo": { "@type": "ImageObject", "url": "https://photo-tea.com/amp-dist/logo.jpg", "width": 300, "height": 60 } } } </script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <style amp-custom>:root sub,:root sup{vertical-align:baseline}a{-moz-transition:.7s;-ms-transition:.7s;-o-transition:.7s;-webkit-transition:.7s;color:#e94f76;-webkit-transition:.7s;-moz-transition:.7s;-o-transition:.7s;-ms-transition:.7s;transition:.7s;border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline}a img{border:none}a:hover{-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;-webkit-transition:.3s;color:#f4aabd;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;-ms-transition:.3s;transition:.3s}abbr,acronym,address,applet,big,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,em,fieldset,form,h1,h2,h3,h4,h5,h6,html,iframe,img,ins,kbd,label,legend,li,object,ol,p,pre,q,s,samp,small,span,strike,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,ul,var{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline}abbr{cursor:help;border-bottom:1px dotted;font-variant:normal}acronym{border-bottom:1px dotted;font-variant:normal}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;background:#fff;color:#3a484b;font-family:"メイリオ","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3",Meiryo,"ヒラギノ角ゴ Pro",Osaka,arial,sans-serif;font-size:102%;font-weight:500;line-height:2em;text-rendering:optimizelegibility}.post .entry-content figure.highlight th,button::-moz-focus-inner,figure.highlight td,input::-moz-focus-inner{border:0;padding:0}caption,table,td,th{vertical-align:middle}.table-align-left,caption,td,th{text-align:left}code,figure.highlight .code,pre{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:subpixel-antialiased}code,kbd,pre,samp{font-family:Menlo,Consolas,Monaco,Consolas,monospace}code,pre{background-color:#f5f2f0;margin:0 3px;padding:1px 8px}code,pre,samp{font-size:.9em;letter-spacing:.05em}del{text-decoration:line-through}#article-nav{clear:both;margin:1em 20px;position:relative}#article-nav:after{clear:both;content:"";display:table}#article-nav:before{content:"";display:table;-webkit-border-radius:50%;-webkit-box-shadow:0 1px 2px #fff;border-radius:50%;-webkit-box-shadow:0 1px 2px #fff;box-shadow:0 1px 2px #fff;content:"";height:8px;left:50%;margin-left:-4px;margin-top:-4px;position:absolute;top:50%;width:8px}#article-nav-newer{float:left;padding-right:20px;text-align:right}#article-nav-newer .article-nav-caption{margin-right:-2px}#article-nav-older{float:right;padding-left:20px;text-align:left}#container{margin-left:auto;margin-right:auto}#footer{background-color:#4f7086;display:block;font-size:70%;line-height:1.6;padding:20px 0}#footer:after{content:".";display:block;font-size:0;height:0;clear:both;visibility:hidden}.copyright,.moreRead:before,.table-align-center,.useFlame,kbd{text-align:center}.blog-title a,.loadingPutAbsolute,.moreRead:before,.nav,.nav-icon,.titleWrapper{position:relative}#header{display:block;margin:.5em 0 1em;position:static;text-align:center;position:relative}#header:after{display:block;font-size:0;height:0}#header:after,.clearfix:after,.nav ul:after{clear:both;visibility:hidden}#main{margin-bottom:3em;padding-left:0}.useFlame,kbd{display:inline-block}#page-nav a,.photoby,kbd{color:#506468}* html .clearfix{height:1%}.alignleft,.left{float:left}.alignright,.right{float:right}.article-devider{border:0;border-top:5px solid #ddd;margin:5em auto;width:8%}.article-nav-caption,.nav{text-transform:uppercase}.article-nav-caption{color:#ddd;font-weight:700;letter-spacing:2px;line-height:1em}.article-nav-link-wrap,a{text-decoration:none}.article-nav-link-wrap{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:#999;display:block;margin-top:0;text-align:center;width:50%}.article-nav-link-wrap:hover{color:#bfbfbf}.article-nav-title{font-size:.85em;line-height:1.6em;margin-top:.5em}.nav ul{display:block}.nav ul li{display:block}.nav ul li a{display:block}.authorCap{font-size:1.5em}.authorReading{font-size:.7em}.site-author-info-wrapper{padding:20px;display:-webkit-box;display:-moz-box;display:-webkit-flex;display:-ms-flexbox;display:box;display:flex;-webkit-box-align:center;-moz-box-align:center;-o-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}.gravatar-wrapper{-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.gravatar-area{margin:0 20px 0 0}.authorCap-wrapper{-webkit-box-flex:3;-moz-box-flex:3;-o-box-flex:3;box-flex:3;-webkit-flex:3;-ms-flex:3;flex:3}.blog-title{border-bottom:none;float:none;font-size:120%;font-weight:700;letter-spacing:.2em;margin:10px 0;padding-bottom:.2em}.blog-title a{left:.1em;padding:.4em 0}.circle{-webkit-border-radius:50%;border-radius:50%}.clearfix:after{content:".";display:block;height:0}.copyright-title{font-size:1.2em}.copyright-tool{text-align:center;font-family:"メイリオ","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3",Meiryo,"ヒラギノ角ゴ Pro",Osaka,arial,sans-serif;margin:1em 0 0 0}h6.categories,h6.tag{color:#4f7086;font-size:110%}.entry-content{width:91.75%;margin:0 auto;font-size:100%}.entry-content h2,.entry-content h3{text-align:center}.entry-content h1{font-size:170%;line-height:1.5;margin:1em 0 .8em}.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6{line-height:1.5;margin:1em 0 .8em}.entry-content h2{border-bottom:2px solid #4f7086;color:#4f7086;font-size:160%;margin:2.2em 0 .5em;padding:.8em 0}.entry-content h3{color:#4f7086;font-size:150%;margin:2.2em 0 .5em;padding:.8em .5em}.entry-content h4{border-left:2px solid #4f7086;color:#4f7086;font-size:120%;margin:2.2em 0 .5em;padding-left:1.2em;text-align:left}.entry-content h5,.entry-content h6{color:#4f7086;text-align:left}.entry-content h5{font-size:110%;padding-left:1.2em;margin:2.2em 0 .5em}.entry-content h6{font-size:100%;margin:2.2em 1em .5em}.entry-content p{font-size:1em;letter-spacing:0;line-height:2.2em;margin:2em 1em}.entry-content p em{background-color:#faf7dc;color:#736e4f;font-style:normal;margin:0 2px;padding:3px}.entry-content p strong{color:#734f4f;font-style:normal;margin:0 2px;padding:3px;background-color:#fadcdc}.entry-content dl,.entry-content ol,.entry-content ul{margin:2em 0 2em 1em;padding:0}.entry-content dl p,.entry-content ol p,.entry-content ul p{margin:0}.entry-content dl li,.entry-content ol li{line-height:2em;margin:.5em}.entry-content ol{list-style:decimal}.entry-content ol li{font-size:1em;margin:.2em 0 .6em 2.6em;padding:0 0 0 .1em;position:relative}.entry-content ol{padding:0;margin:0;list-style:none}.entry-content ol{counter-reset:number;list-style:none;margin:0;padding:0}.entry-content ol li:before{counter-increment:number;content:counter(number);position:absolute;left:-2.2em;top:.05em;display:inline-block;margin:0 .5em 0 0;padding:0;float:left;background:#b6b6b6;width:1.6em;height:1.6em;border-radius:50%;color:#fff;text-align:center;line-height:1.6em}.entry-content ol li p:first-child{display:inline-block;line-height:1.6em;height:1.6em;line-height:1.6em}.entry-content ul{list-style:none}.entry-content ul li{font-size:1em;margin:.2em 0 .6em .5em;padding:0 0 0 .2em;position:relative}.entry-content ul li::after{display:block;content:'';position:absolute;top:.75em;left:-1em;width:.6em;height:.6em;background-color:#b6b6b6;border-radius:100%}.entry-content dl li ol,.entry-content dl li ul{margin-bottom:2em}.entry-content ol li ol,.entry-content ol li ul{margin-bottom:2em}.entry-content ul li ol,.entry-content ul li ul{margin-bottom:2em}.entry-content ol p:not(:first-child),.entry-content ul p:not(:first-child){color:#667f85;margin:1em}.entry-content .archive .post,.entry-content blockquote p:last-child{margin-bottom:0}.entry-content blockquote{margin:2em 0;padding:1em 1.8em;position:relative;background-color:#f6f6f4}.entry-content blockquote p{margin:1em 0}.entry-content blockquote:before{color:#dfdfd8;content:"”";font-family:sans-serif;font-size:600%;line-height:1em;position:absolute;right:0;top:0;z-index:1}.entry-content blockquote blockquote:before{content:""}.entry-content hr{border:0;border-top:3px solid #ddd;margin:3em auto;width:20%}.entry-content img,.entry-content video{display:block;height:auto;margin:auto;max-width:100%}.entry-content pre{-moz-background-clip:padding;-webkit-background-clip:padding;background:#f5f2f0;-webkit-background-clip:padding;-moz-background-clip:padding;background-clip:padding-box;border:0;font-size:100%;line-height:1.3;overflow-x:auto;padding:15px}.entry-content table{border-collapse:collapse;border-spacing:0;font-size:.85em;margin:2em auto;width:auto}.entry-content td{border:1px solid #c4c4c4;line-height:1.8em;padding:.8em .8em}.entry-content th{background-color:#fdf7f4;border:1px solid #c4c4c4;padding:.8em .8em}.entry-content iframe{width:100%}.entry-content figure.highlight{margin:2em 0}.entry-content figure.highlight td{border:0;font-size:1.1em;padding:0}.entry-content figure.highlight td.code{border-left:1px solid #eceae8}.entry-meta-header{font-size:87%;left:-200px;margin-bottom:1em;position:static;top:.5em;width:auto;text-align:center}.entry-meta-header .date{font-family:"メイリオ","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3",Meiryo,"ヒラギノ角ゴ Pro",Osaka,arial,sans-serif}.entry-meta-header .meta-elements{display:inline;margin-bottom:.5em;margin-right:1em}.gist{background:#fff;border:1px solid color-gutter;color:#918577;line-height:1.6;margin-top:15px;overflow:auto;padding:7px 15px}.gist .gist-file{border:none;font-family:inherit;font-size:1em;letter-spacing:0;margin:0}.gist .gist-file .gist-data{background:0 0;border-bottom:none}.gist .gist-file .gist-data pre{font-family:Menlo,Consolas,Monaco,Consolas,monospace;padding:0}.gist .gist-file .gist-meta{background:0 0;color:#918577;font-size:100%;margin-top:5px;padding:0}.gist .gist-file .gist-meta a{color:#918577}.gist .gist-file .gist-meta a:visited{color:#918577}.line{font-size:95%;letter-spacing:.05em;line-height:2em}.post{font-size:90%;margin-bottom:5em;position:relative}.post .entry-header{margin-bottom:2em}.post .entry-title{font-size:130%;margin:0}.post h1{font-size:1.2em}.table-align-right{text-align:right}figure.highlight{background:#fff;border:1px solid color-gutter;font-size:.9em;line-height:2;margin:2.2em 0;overflow:auto;padding:7px 10px;position:relative}figure.highlight .code{border-left:1px solid #fff;color:#918577}figure.highlight .gutter{color:#d4d0cd;padding-right:10px;text-align:left}figure.highlight figcaption{color:#d4d0cd;margin-bottom:5px}figure.highlight figcaption a{position:absolute;right:15px}figure.highlight pre{background:0 0;border:none;margin:0;padding:8px}figure.highlight table{border-spacing:0;margin:0}.post .entry-content figure.highlight table{border-spacing:0;margin:0}figure.highlight th{border:0;font-weight:400;padding:0}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:#000;text-decoration:none}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color:#4f7086}img.responsive-img{height:auto;max-width:100%}video.responsive-video{height:auto;max-width:100%}kbd{-moz-osx-font-smoothing:grayscale;-webkit-border-radius:3px;-webkit-box-shadow:0 0 10px #e2e2e2 inset,0 1px 0 #c3c3c3,0 2px 0 #c9c9c9,0 3px 3px #333;-webkit-font-smoothing:subpixel-antialiased;background:#fff;border-bottom:1px solid #e6e6e6;border-left:1px solid #fff;border-radius:3px;border-right:1px solid #e6e6e6;border-top:1px solid #fff;-webkit-box-shadow:0 0 10px #e8e8e8 inset,0 1px 0 #c3c3c3,0 2px 0 #c9c9c9,0 3px 3px #333;box-shadow:0 0 10px #e8e8e8 inset,0 1px 0 #c3c3c3,0 2px 0 #c9c9c9,0 3px 3px #333;font-size:.85em;line-height:1;margin:5px;padding:6px 8px 3px;text-shadow:0 1px 0 #fff;vertical-align:baseline}pre .addition,pre .css .tag,pre .keyword,pre .method,pre .nginx .title,pre .request,pre .status,pre .winutils{color:#1a9ca1}pre .attr_selector,pre .cdata,pre .clojure .title,pre .diff .change,pre .important{color:#816ec5}pre .preprocessor{color:#816ec5}pre .preprocessor .keyword{color:#816ec5}pre .shebang,pre .special,pre .subst{color:#816ec5}pre .symbol{color:#816ec5}pre .symbol .string{color:#816ec5}pre .attribute,pre .class .title,pre .constant,pre .haskell .type,pre .lisp .body,pre .parent,pre .smalltalk .number,pre .variable{color:#c38700}pre .built_in,pre .chunk,pre .decorator,pre .deletion,pre .id,pre .identifier,pre .literal,pre .localvars,pre .title,pre .vhdl{color:#b42147}pre .command,pre .hexcolor,pre .number,pre .phpdoc,pre .regexp,pre .string,pre .tag .value,pre .tex .formula{color:#6c9a1c}pre .comment,pre .diff .header,pre .doctype,pre .javadoc,pre .lisp .string,pre .pi,pre .template_comment{color:#d4d0cd;font-weight:400}sub{bottom:-.2em;font-size:75%;line-height:0;position:relative}sup{font-size:75%;line-height:0;position:relative;top:-.5em}table{border-collapse:separate;border-spacing:0}.article-tag-list,td.code{padding:0}.entry-content .toc{background:#fff;padding:1em 1em 1em 0;margin:2.8em 0;border:1px solid #98d1f5}.entry-content .toc ul:first-child{border-top:none}.entry-content .toc ul{margin-bottom:0;padding:0;margin:0;border-top:1px dotted #98d1f5}.entry-content .toc ul ol,.entry-content .toc ul ul{margin-bottom:0;padding:0;margin:0 0 0 .8em}.entry-content .toc ul li{padding:0;margin:0 0 0 1em;border-top:1px dotted #98d1f5}.entry-content .toc ul li a{display:block;padding:10px 8px;color:#3a484b;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;-ms-transition:.3s;transition:.3s}.entry-content .toc ul li a:hover{color:#4f7086;background-color:#98d1f5}.entry-content .toc ul li a:before{display:inline-block;padding:0;margin:0;margin-right:.8em}.entry-content .toc ul li ol,.entry-content .toc ul li ul{margin-bottom:0;padding:0;margin:0 0 0 .8em}.entry-content .toc ul li ol li a,.entry-content .toc ul li ul li a{padding:7px 10px;font-size:.9em}.entry-content .toc ul li ol li a:before,.entry-content .toc ul li ul li a:before{display:inline-block;padding:0;margin:0;margin-right:.6em}.entry-content .toc ul li:first-child{border-top:none}.entry-content .toc ul li::after,.entry-content .toc ul li::before{content:normal}header{height:60px}header .nav-container{display:-webkit-box;display:-ms-flexbox;display:-webkit-box;display:-moz-box;display:-webkit-flex;display:-ms-flexbox;display:box;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-pack:justify;-moz-box-pack:justify;-o-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between}header .left-nav{display:-webkit-box;display:-ms-flexbox;display:-webkit-box;display:-moz-box;display:-webkit-flex;display:-ms-flexbox;display:box;display:flex;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-align:center;-moz-box-align:center;-o-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-box-pack:start;-moz-box-pack:start;-o-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;font-size:20px;margin-left:0;font-weight:300;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-box-pack:start;-moz-box-pack:start;-o-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-box-flex:1;-ms-flex:1 1 auto;-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;text-align:left;width:auto;font-size:15px}header .right{font-size:15px}header .alt{padding:0;text-align:right;display:-webkit-box;display:-ms-flexbox;display:-webkit-box;display:-moz-box;display:-webkit-flex;display:-ms-flexbox;display:box;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;-webkit-box-align:stretch;-moz-box-align:stretch;-o-box-align:stretch;-ms-flex-align:stretch;-webkit-align-items:stretch;align-items:stretch;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-pack:center;-moz-box-pack:center;-o-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center}.header-title a{padding:0 0 0 20px;height:60px;line-height:60px;font-size:20px;color:#000;letter-spacing:.2em}button{-webkit-box-align:start;-moz-box-align:start;-o-box-align:start;-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start;text-align:center;cursor:default;color:buttontext;background-color:buttonface;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:2px 6px 3px;border-width:2px;border-style:outset;border-color:buttonface;-webkit-border-image:initial;-moz-border-image:initial;-o-border-image:initial;border-image:initial;text-rendering:auto;color:initial;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;text-shadow:none;display:inline-block;text-align:start;margin:0;font:11px system-ui;-webkit-writing-mode:horizontal-tb;-webkit-appearance:button}.__web-inspector-hide-shortcut__{visibility:hidden}.hamburger{display:inline-block;background-color:transparent;background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-3 -6 24 24\"><path fill=\"#4A4A4A\" d=\"M0 12h18v-2H0v2M0 7h18V5H0v2M0 0v2h18V0H0\"/></svg>");background-repeat:no-repeat;-webkit-background-size:30px 24px;-moz-background-size:30px 24px;background-size:30px 24px;background-position:center center;border:none;margin:0;padding:0;width:60px;height:60px;cursor:pointer;-ms-flex-item-align:center;-ms-grid-row-align:center;-webkit-align-self:center;align-self:center;-ms-flex-item-align:center}.tab{position:relative;color:#424242;padding:6px;margin:0 4px;text-decoration:none;text-transform:uppercase;font-weight:400;-webkit-transition:.1s ease color;-webkit-transition:.1s ease color;-moz-transition:.1s ease color;-o-transition:.1s ease color;-ms-transition:.1s ease color;transition:.1s ease color}amp-sidebar{width:200px}amp-sidebar ul{padding:10px 0}amp-sidebar li a{display:block;padding:10px 20px}.title-cover{background-color:#4f7086;color:#fff;padding:30px 15px 20px 15px;text-align:center}.title-cover a{color:#fff}.title-cover a:hover{color:#fff}.meta-content{background-color:#e9e9e9;padding:20px 0}.meta-wrapper{margin:20px 20px;padding:20px 20px;background-color:#fff}#footer .copyright-tool,#footer .homeLink{margin:20px}.copyright-tool{color:#fff;font-size:.5em}.social-share{margin:10px 0 0 0;display:-webkit-box;display:-moz-box;display:-webkit-flex;display:-ms-flexbox;display:box;display:flex;-webkit-box-pack:center;-moz-box-pack:center;-o-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center}.social-share amp-social-share{margin:5px}#totop{position:fixed;bottom:20px;right:20px;font-size:1.2em;z-index:995;line-height:1.8em}#totop a{background:rgba(152,209,245,.6);text-decoration:none;color:#fff;padding:0;text-align:center;display:block;width:1.2em;height:2.2em;line-height:2em;letter-spacing:0;position:relative;display:inline-block;padding:0 0 0 16px;vertical-align:middle;text-decoration:none;font-size:15px}#totop a:after,#totop a:before{position:absolute;top:0;bottom:0;left:0;margin:auto;content:"";vertical-align:middle}#totop a:before{left:12px;width:8px;height:8px;border-top:2px solid #fff;border-right:2px solid #fff;-webkit-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}#totop a:hover{text-decoration:none;background:#4f7086;color:#fff;line-height:2.3em}.site-author-desc{font-size:1.2em;line-height:2em;margin-top:1em}.site-author-info{background-color:#fff;margin:20px}.gravatar-area{-webkit-border-radius:50%;border-radius:50%}.article-categories,.article-categories-list,.article-tag,.article-tag-list{padding:0;margin:0}.article-categories{margin-bottom:1.6em}.article-categories-list li,.article-tag-list li{list-style:none;display:inline-block;padding:0;margin:.2em 0}.article-categories-list li a,.article-tag-list li a{padding:.5em .6em;margin:.4em 0;background-color:#f5f2f0;color:#3a484b}.article-categories-list li a:before,.article-tag-list li a:before{content:"#"}.article-categories-list li a:hover,.article-tag-list li a:hover{color:#fff;background-color:#648aa4}.homeLink,.htmlPageLink{font-weight:700;-moz-transition:.7s;-ms-transition:.7s;-o-transition:.7s;-webkit-transition:.7s;-webkit-transition:.7s;-moz-transition:.7s;-o-transition:.7s;-ms-transition:.7s;transition:.7s;padding:.4em 0}.homeLink a,.htmlPageLink a{color:#fff;display:block;padding:1em;text-align:center}.homeLink:hover,.htmlPageLink:hover{-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;-webkit-transition:.3s;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;-ms-transition:.3s;transition:.3s}.homeLink{font-size:120%;background:#7496ad}.homeLink:hover{background:#94afc0}.htmlPageLink{font-size:110%;background:#7496ad}.htmlPageLink:hover{background:#94afc0}.ad-footer,.googleAdPost,amp-instagram,amp-twitter,amp-video,amp-vimeo,amp-youtube{margin:2.8em 0}.sns-link{margin:1em 0}.sns-link a{font-size:2.6em;padding:.4em .1em;margin:0 .1em;color:#d0d0d0}.sns-link a:hover{color:#4f7086}.applink-wrapper .applink-col{width:100%}.applink-wrapper .applink-col a{display:block;width:60%;margin:0 auto}.applink-wrapper,.babylink-box{border:1px solid #f8981d;position:relative}.applink-wrapper .applink,.applink-wrapper .babylink-wrapper,.babylink-box .applink,.babylink-box .babylink-wrapper{margin:1em 1em 1em 1em}.applink-wrapper .app-image,.applink-wrapper .babylink-image,.babylink-box .app-image,.babylink-box .babylink-image{margin:0 5% 0 0;display:inline-block;vertical-align:middle;width:40%}.applink-wrapper .app-title,.applink-wrapper .babylink-info,.babylink-box .app-title,.babylink-box .babylink-info{margin:0;display:inline-block;vertical-align:middle;width:55%}.applink-wrapper .app-info,.applink-wrapper .babylink-description,.babylink-box .app-info,.babylink-box .babylink-description{margin:1em 1.2em .5em 1.2em}.applink-wrapper .babylink-description,.babylink-box .babylink-description{line-height:1.8em}.applink-wrapper .babylink-manufacturer,.babylink-box .babylink-manufacturer{margin:.8em 0;line-height:1.8em}.applink-wrapper .babylink-title,.babylink-box .babylink-title{font-size:1em;margin:.8em 0;line-height:1.8em}.applink-wrapper .babylink-title a,.babylink-box .babylink-title a{display:block;padding:1em 0}.applink-wrapper .aicon,.babylink-box .aicon{position:absolute;display:none}.applink-wrapper .babylink-amazonBtn,.babylink-box .babylink-amazonBtn{margin:1.4em 0 1em 0;height:4em}.applink-wrapper .babylink-amazonBtn a.amb,.babylink-box .babylink-amazonBtn a.amb{-webkit-transition:.1s;-moz-transition:.1s;-o-transition:.1s;-webkit-transition:.1s;-moz-transition:.1s;-o-transition:.1s;-ms-transition:.1s;transition:.1s;font-size:1em;height:3.5em;line-height:3.5em;text-align:center;color:#fff;width:85%;margin:0 auto;padding:0;display:block;background-color:#f8981d;border-top:1px solid #fff;border-bottom:4px solid #c27006;border-radius:4px}.applink-wrapper .babylink-amazonBtn a.amb:hover,.babylink-box .babylink-amazonBtn a.amb:hover{color:#fff;border-top:4px solid #fff;border-bottom:1px solid #c27006}.applink-wrapper .amazon-icon:before,.babylink-box .amazon-icon:before{content:"\f270";font-family:fontawesome;color:#fff}.entry-content p.openMap{text-align:center}.entry-content .attention{border:1px solid #ce8a8a}.entry-content .attention h5.label,.entry-content .attention h6.label{color:#ce8a8a}.entry-content .r-download{border:1px solid #88a3c1}.entry-content .r-download h5.label,.entry-content .r-download h6.label{color:#88a3c1}.entry-content .r-memo{border:1px solid #88b9c1}.entry-content .r-memo h5.label,.entry-content .r-memo h6.label{color:#88b9c1}.entry-content .attention,.entry-content .babylink-box,.entry-content .r-download,.entry-content .r-memo{margin:2.2em 0;padding:0;border-radius:2px}.entry-content .attention h5.label,.entry-content .attention h6.label,.entry-content .babylink-box h5.label,.entry-content .babylink-box h6.label,.entry-content .r-download h5.label,.entry-content .r-download h6.label,.entry-content .r-memo h5.label,.entry-content .r-memo h6.label{background:0 0;background-color:none;border:none;border-bottom:none;border-left:none;border-right:none;border-top:none;margin:1.2em 1.5em;padding:0}.entry-content .attention h6.label,.entry-content .r-download h6.label,.entry-content .r-memo h6.label{font-size:1em}.entry-content .attention p.label,.entry-content .r-download p.label,.entry-content .r-memo p.label{font-size:.85em;margin:1.5em;padding:0}.entry-content .attention .amp-img-wrapper,.entry-content .attention table,.entry-content .r-download .amp-img-wrapper,.entry-content .r-download table,.entry-content .r-memo .amp-img-wrapper,.entry-content .r-memo table{margin:1.8em 1.8em 0 1.8em}.entry-content .attention dl,.entry-content .attention ol,.entry-content .attention ul{margin:1em 1em 1em 2em}.entry-content .r-download dl,.entry-content .r-download ol,.entry-content .r-download ul{margin:1em 1em 1em 2em}.entry-content .r-memo dl,.entry-content .r-memo ol,.entry-content .r-memo ul{margin:1em 1em 1em 2em}.entry-content .attention h5.label:before,.entry-content .attention h6.label:before{content:"\f071"}.entry-content .r-download h5.label:before,.entry-content .r-download h6.label:before{content:"\f019"}.entry-content .r-memo h5.label:before,.entry-content .r-memo h6.label:before{content:"\f0f6"}.entry-content .attention h5.label,.entry-content .attention h6.label,.entry-content .r-download h5.label,.entry-content .r-download h6.label,.entry-content .r-memo h5.label,.entry-content .r-memo h6.label{margin:1.8em 1.8em 0}.entry-content .attention h5.label:before,.entry-content .attention h6.label:before,.entry-content .r-download h5.label:before,.entry-content .r-download h6.label:before,.entry-content .r-memo h5.label:before,.entry-content .r-memo h6.label:before{margin:0 .5em 0 0;font-family:fontawesome}.entry-content .attention ol li,.entry-content .attention ul li{font-size:.85em}.entry-content .r-download ol li,.entry-content .r-download ul li{font-size:.85em}.entry-content .r-memo ol li,.entry-content .r-memo ul li{font-size:.85em}.entry-content .attention ul li:after,.entry-content .r-download ul li:after,.entry-content .r-memo ul li:after{top:.85em}.entry-content .attention p.label,.entry-content .r-download p.label,.entry-content .r-memo p.label{font-size:.85em;margin:1.8em}.amSimple{margin:1.8em 0;padding:1em 1.8em;position:relative;background-color:#f6f6f4}.amSimple p{margin:1em 0}amp-img,img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-drag:none;-khtml-user-drag:none}.imgCaption{text-align:center}.imgCaption span{font-size:.5em;color:#b6b6b6}.bcg{width:90%;margin:2.8em auto}.bcg-x-and-cell{width:100%;margin:0;position:relative;height:100%}.bcg-x-label{width:94%;margin:5px 0 0 6%;text-align:center}.bcg-y-label{-webkit-writing-mode:vertical-rl;-ms-writing-mode:tb-rl;writing-mode:vertical-rl;text-orientation:sideways-right;width:6%;display:inline-block}.bcg-y-label-inner{position:absolute;top:50%;left:1%;display:inline-block;-webkit-transform:translate(-50%,-50%) rotate(180deg);-moz-transform:translate(-50%,-50%) rotate(180deg);-o-transform:translate(-50%,-50%) rotate(180deg);-ms-transform:translate(-50%,-50%) rotate(180deg);transform:translate(-50%,-50%) rotate(180deg);text-align:center;height:100%}.label-circle{display:inline-block;padding:.2em;border-radius:50%;width:1.6em;height:1.6em;line-height:1.6em;font-size:.8em}.label-week{background-color:#758f94;color:#fff}.label-strong{background-color:#3c4b4e;color:#fff}.label-desc{margin:.8em;display:inline-block}.bcg-table-wrapper{margin:0;padding:0;width:94%;display:inline-block}.bcg-table{border-collapse:collapse}.bcg-table .bcg-td{width:50%;text-align:center;height:100px;border:1px solid #fff;margin:0;padding:0;font-size:1.2em}.bcg-table .def{background-color:#758f94;color:#fff}.bcg-table .em{background-color:#55696e;color:#fff}.bcg-table .strong{background-color:#3c4b4e;color:#fff}@media (min-width:800px){.article-nav,.entry-content,.entry-header,.entry-title{width:780px;margin:0 auto}.nav-container{width:800px;margin:0 auto}.meta-wrapper{width:760px;margin:20px auto}.site-author-info{width:760px;margin:20px auto}#footer .copyright-tool,#footer .homeLink{width:760px;margin:20px auto}}#hexo-amp-id-1{position:absolute;left:50%;top:0}#hexo-amp-id-2{position:absolute;left:50%;top:0}#googleMap6503{height:250px;width:100%;margin:0;padding:0}#hexo-amp-id-3{max-width:722px}#hexo-amp-id-4{line-height:1.8em;padding:0}</style> </head> <body> <amp-analytics id="google-analytics" type="googleanalytics"> <script type="application/json"> { "vars": { "account": "UA-69991428-1" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script> </amp-analytics> <header> <div class="nav-container"> <div class="left-nav"> <div class="header-title"> <a href="/">TPB</a> </div> </div> <div class="alt right"> <button class="hamburger tab" on="tap:sidebar.toggle"></button> </div> </div> </header> <amp-sidebar id="sidebar" layout="nodisplay" side="left"> <ul> <li><a href="/">Home</a></li> <li><a href="/categories/diary/">日記</a></li> <li><a href="/profile/">ポートフォリオ</a></li> <li><a href="https://ws.formzu.net/fgen/S63420755/">お問い合わせ</a></li> </ul> </amp-sidebar> <div id="container"> <div id="main"> <article class="post" id="post-p/hexo-markdown-notation"> <div class="title-cover"> <div class="entry-header"> <h1 class="article-title entry-title" itemprop="name"> <a href="https://photo-tea.com/p/hexo-markdown-notation/" target="_blank" itemprop="url">【一覧】markdownの記法まとめ・hexoで記事を書く方法(プラグインや独自タグ定義解説あり)</a> </h1> </div> <div class="entry-meta-header"> <span class="date meta-elements"> <time datetime="2016-03-01" itemprop="datePublished">2016-03-01</time> </span> </div> </div> <div class="ecp entry-content"> <div class="social-share"> <amp-social-share height="40" type="twitter" width="40"></amp-social-share> <amp-social-share height="40" type="facebook" width="40" data-param-app_id="1020441797977517" data-param-href="https://photo-tea.com/p/hexo-markdown-notation/" data-param-text=""></amp-social-share> <amp-social-share height="40" type="gplus" width="40"></amp-social-share> </div> <p>markdownの書き方の解説や、ブログジェネレータであるHexoで使える特別な記法をまとめてみました。実際にこちらのブログもMarkdownで記事を書いています。</p> <p>前半では、markdownの一般的な記述について説明を行います。見出し(h1)やテーブル(table)、リンク(link)、画像(iamge)など、代表的なものから順番に説明していきたいと思います。</p> <p>後半では、ブログジェネレータであるHexoで使える独自の記法、プラグインを活用した独自タグの利用例、また独自タグの定義方法をまとめます。</p> <p>また、hexoで使っているプラグインや使い方については、別途こちらをご覧ください。</p> <blockquote> <p>自身のブログ<br><cite><a href="/p/usecase-of-hexo-plugin/" class="link-gaTrack" data-linktype="link-internal" title="Hexoブログで使ってるプラグインを晒してみる">Hexoブログで使ってるプラグインを晒してみる</a></cite><br><cite><a href="/tags/series-hexo-how-to/" class="link-gaTrack" data-linktype="link-internal" title="連載：Hexoの使い方とブログの初め方">連載：Hexoの使い方とブログの初め方</a></cite></p> </blockquote> <p>それでは早速みていきましょう！</p> <div class="googleAdPost"><div class="ads-label">Ads</div><amp-ad data-ad-client="ca-pub-1264439991284290" data-ad-slot="8049173166" height="250" type="adsense" width="320"></amp-ad></div><h2><span id="目次">目次</span></h2><div class="toc"> <ul> <li><a href="#markdownの記法-一覧" class="link-gaTrack" data-linktype="link-toc">markdownの記法 一覧</a><ul> <li><a href="#h2h6-見出し" class="link-gaTrack" data-linktype="link-toc">h2〜h6 見出し</a></li> <li><a href="#a-リンク" class="link-gaTrack" data-linktype="link-toc">a リンク</a></li> <li><a href="#img-画像の埋め込み" class="link-gaTrack" data-linktype="link-toc">img 画像の埋め込み</a></li> <li><a href="#table-テーブル" class="link-gaTrack" data-linktype="link-toc">table テーブル</a></li> <li><a href="#ul-ol-リスト表記" class="link-gaTrack" data-linktype="link-toc">ul、ol リスト表記</a></li> <li><a href="#em-strong-強調" class="link-gaTrack" data-linktype="link-toc">em、strong 強調</a></li> <li><a href="#code-block-コードブロック" class="link-gaTrack" data-linktype="link-toc">code block コード・ブロック</a></li> <li><a href="#inline-code-インラインコード" class="link-gaTrack" data-linktype="link-toc">inline code インライン・コード</a></li> <li><a href="#del-打ち消し" class="link-gaTrack" data-linktype="link-toc">del 打ち消し</a></li> <li><a href="#kbd-キーボード" class="link-gaTrack" data-linktype="link-toc">kbd キーボード</a></li> <li><a href="#blockquote-引用" class="link-gaTrack" data-linktype="link-toc">blockquote 引用</a></li> </ul> </li> <li><a href="#hexoで使える独自タグ" class="link-gaTrack" data-linktype="link-toc">hexoで使える独自タグ</a><ul> <li><a href="#excerpt-記事の抜粋や概要" class="link-gaTrack" data-linktype="link-toc">excerpt 記事の抜粋や概要</a></li> <li><a href="#toc-目次の自動生成" class="link-gaTrack" data-linktype="link-toc">toc 目次の自動生成</a></li> <li><a href="#youtubeやvimeoの埋め込み" class="link-gaTrack" data-linktype="link-toc">youtubeやvimeoの埋め込み</a></li> <li><a href="#flickrの画像を埋め込む" class="link-gaTrack" data-linktype="link-toc">flickrの画像を埋め込む</a></li> <li><a href="#instagramを埋め込む" class="link-gaTrack" data-linktype="link-toc">instagramを埋め込む</a></li> <li><a href="#twitterツイートを埋め込む" class="link-gaTrack" data-linktype="link-toc">twitterツイートを埋め込む</a></li> <li><a href="#sound-cloudのトラックを埋め込む" class="link-gaTrack" data-linktype="link-toc">Sound Cloudのトラックを埋め込む</a></li> <li><a href="#google-mapを埋め込む" class="link-gaTrack" data-linktype="link-toc">google mapを埋め込む</a></li> <li><a href="#画像の比較jquery-twentytwenty" class="link-gaTrack" data-linktype="link-toc">画像の比較(jQuery TwentyTwenty)</a></li> <li><a href="#応用編hexoで独自に定義したタグを使う" class="link-gaTrack" data-linktype="link-toc">応用編！hexoで独自に定義したタグを使う</a><ul> <li><a href="#実装例1instagramの投稿記事を埋め込むhexo-markdownタグ" class="link-gaTrack" data-linktype="link-toc">実装例1：Instagramの投稿記事を埋め込むHexo markdownタグ</a></li> <li><a href="#実装例2注意書き欄のhtmlを生成するhexo-markdownタグ" class="link-gaTrack" data-linktype="link-toc">実装例2：注意書き欄のHTMLを生成するHexo markdownタグ</a></li> </ul> </li> </ul> </li> <li><a href="#備録markdownのエディタとwebツール" class="link-gaTrack" data-linktype="link-toc">(備録)markdownのエディタとWebツール</a></li> <li><a href="#最後に" class="link-gaTrack" data-linktype="link-toc">最後に</a></li> </ul> </div> <p><div class="img-wrapper imgw"><span class="imgg-key-off imggw"></span><span class="imgg"></span><p><div class="amp-img-wrapper"><amp-img layout="responsive" src="https://farm5.staticflickr.com/4154/5022680244_8a34b71159_b.jpg" height="681" width="1024"></amp-img></div><p></div><p></p> <p>photo by Mr. <a href="https://www.flickr.com/photos/11872189@N00/5022680244/in/photolist-8DQxRf-q2RiNN-6jBaB-8S2vUC-5wyEen-3s5mTT-6gdJxw-nz7Hr4-vh5qj-6tPFHS-6ARCfW-pMrQ1N-4Pv7ii-pwksGp-95Pq4F-pV3rV2-9KQMGD-ddd5Yc-qCQYZp-f19c1-pokQd1-Gea4J-ooNruK-vpg6U-9rjV72-bbaZVK-r2KQuz-h9nvC5-qa7oz-9uMUKq-2VTqwG-81RqH3-cT7XKN-ephYvd-5in1io-bJVquz-ofGByQ-e8vNHy-rECgUF-i9U414-8d3zza-a1vKe3-bFxRCV-bJVsqi-9Hn37k-q749DT-jT5U21-r1K5WZ-pF7Zf1-ur56F" class="link-gaTrack" data-linktype="link-external" rel="nofollow" target="_blank">Alex Garcia - Double Cliche</a> on flickr</p> <div class="amSimple"><p><cite><a href="https://www.amazon.co.jp/gp/product/4844374656/ref=as_li_tf_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4844374656&linkCode=as2&tag=teaafter2010-22" class="link-gaTrack" data-linktype="link-external" rel="external" target="_blank" title="小さな会社 ネット集客の鉄則 90日で結果を出し、5年先も使える！" data-at="小さな会社 ネット集客の鉄則 90日で結果を出し、5年先も使える！" data-linkelm="AmazonTxt">小さな会社 ネット集客の鉄則 90日で結果を出し、5年先も使える！</a></cite></div> <h2><span id="markdownの記法-一覧">markdownの記法 一覧</span></h2><p>まずはmarkdownの一般的な記述方法をまとめてみたいと思います。こちらはHexoでも使用できます。</p> <h3><span id="h2h6-見出し">h2〜h6 見出し</span></h3><p>見出しをmarkdownで記述するには、行の始めに<code>#</code>を付けて、見出しの文字列と半角スペースで区切ります。<code>#</code>の数に応じて<code><h2></h2></code>から<code><h6></h6></code>まで生成できます。</p> <figure class="highlight markdown"><figcaption><span>sample-h.md</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre><td class="code"><pre><span class="line"><span class="header">## h2の見出し</span></span><br><span class="line"><span class="header">### h3の見出し</span></span><br><span class="line"><span class="header">#### h4の見出し</span></span><br><span class="line"><span class="header">##### h5の見出し</span></span><br><span class="line"><span class="header">###### h6の見出し</span></span><br></pre></table></figure> <p>生成されるHTMLタグは以下のようになります。</p> <figure class="highlight html"><figcaption><span>sample-h.html</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre><td class="code"><pre><span class="line"><span class="tag"><<span class="title">h2</span>></span>h2の見出し<span class="tag"></<span class="title">h2</span>></span></span><br><span class="line"><span class="tag"><<span class="title">h3</span>></span>h3の見出し<span class="tag"></<span class="title">h3</span>></span></span><br><span class="line"><span class="tag"><<span class="title">h4</span>></span>h4の見出し<span class="tag"></<span class="title">h4</span>></span></span><br><span class="line"><span class="tag"><<span class="title">h5</span>></span>h5の見出し<span class="tag"></<span class="title">h5</span>></span></span><br><span class="line"><span class="tag"><<span class="title">h6</span>></span>h6の見出し<span class="tag"></<span class="title">h6</span>></span></span><br></pre></table></figure> <h3><span id="a-リンク">a リンク</span></h3><p>リンクを記述するには<code>[リンクを貼りたい文字列](URL "URL先のタイトル")</code>と記述します。URLは相対パスや絶対パスの指定ができます。</p> <figure class="highlight markdown"><figcaption><span>sample-a.md</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre><td class="code"><pre><span class="line">[<span class="link_label">Yahooのサイト</span>](<span class="link_url">http://www.yahoo.co.jp/ "ヤフー"</span>)</span><br><span class="line">[<span class="link_label">ブログ内のリンク</span>](<span class="link_url">/tags/hexo-npm-nodejs/ "node.jsに関する記事"</span>)</span><br></pre></table></figure> <p>上記のように記述すると、以下のように表示されます。</p> <p><a href="http://www.yahoo.co.jp/" class="link-gaTrack" data-linktype="link-external" rel="nofollow" target="_blank" title="ヤフー">Yahooのサイト</a><br><a href="/tags/hexo-npm-nodejs/" class="link-gaTrack" data-linktype="link-internal" title="node.jsに関する記事">ブログ内のリンク</a></p> <p>生成されるHTMLタグは以下のようになります。</p> <figure class="highlight html"><figcaption><span>sample-a.html</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre><td class="code"><pre><span class="line"><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"http://www.yahoo.co.jp/"</span> <span class="attribute">title</span>=<span class="value">"ヤフー"</span> <span class="attribute">target</span>=<span class="value">"_blank"</span> <span class="attribute">rel</span>=<span class="value">"external"</span>></span>Yahooのサイト<span class="tag"></<span class="title">a</span>></span></span><br><span class="line"><span class="tag"><<span class="title">a</span> <span class="attribute">href</span>=<span class="value">"/tags/hexo-npm-nodejs/"</span> <span class="attribute">title</span>=<span class="value">"node.jsに関する記事"</span>></span>ブログ内のリンク<span class="tag"></<span class="title">a</span>></span></span><br></pre></table></figure> <h3><span id="img-画像の埋め込み">img 画像の埋め込み</span></h3><p>画像を埋め込むには<code></code>と記述します。widthやheightを指定した場合はHTMLタグの直接記述が必要になります。</p> <figure class="highlight markdown"><figcaption><span>sample-img.md</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre><td class="code"><pre><span class="line">![<span class="link_label">カメラの画像</span>](<span class="link_url">https://farm8.staticflickr.com/7558/camera.jpg "カメラの画像を貼りました"</span>)</span><br></pre></table></figure> <p>上記のように記述すると、以下のように表示されます。</p> <div class="loadingPutAbsolute"><div class="loadingPutAbsoluteW"><div id="loader817612"><div class="loader blue-bsm"><div class="ball-scale-multiple loader-inner"></div></div></div></div></div><div class="img-wrapper imgw"><span class="imgg-key-off imggw"></span><span class="imgg"></span><p><div class="amp-img-wrapper"><amp-img layout="responsive" src="https://farm8.staticflickr.com/7558/15444072663_a9e4c55b57_b.jpg" height="1024" width="768"></amp-img></div><p></div> <p>生成されるHTMLタグは以下のようになります。</p> <figure class="highlight html"><figcaption><span>sample-img.html</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre><td class="code"><pre><span class="line"><span class="tag"><<span class="title">img</span> <span class="attribute">src</span>=<span class="value">"https://farm8.staticflickr.com/7558/camera.jpg"</span> <span class="attribute">alt</span>=<span class="value">"カメラの画像"</span> <span class="attribute">title</span>=<span class="value">"カメラの画像を貼りました"</span>></span><span class="tag"></<span class="title">p</span>></span></span><br></pre></table></figure> <h3><span id="table-テーブル">table テーブル</span></h3><p>テーブルは以下のように、<code>|</code>で囲みます。左寄せや右寄せ、中央揃いは行の区切りに<code>:</code>を用いて表します。<code>:</code>の位置によって寄せ方が変わります。</p> <figure class="highlight markdown"><figcaption><span>sample-table.md</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre><td class="code"><pre><span class="line">| 左寄せ | 右寄せ | 中央 |</span><br><span class="line">|:-----------|------------:|:------------:|</span><br><span class="line">| This | This | This |</span><br><span class="line">| column | column | column |</span><br><span class="line">| will | will | will |</span><br><span class="line">| be | be | be |</span><br><span class="line">| left | right | center |</span><br><span class="line">| aligned | aligned | aligned |</span><br></pre></table></figure> <p>上記のようにmarkdownを記述すると、以下のように表示されます。</p> <table> <thead> <tr> <th class="table-align-left">左寄せ</th> <th class="table-align-right">右寄せ</th> <th class="table-align-center">中央</th> </tr> </thead> <tbody> <tr> <td class="table-align-left">This</td> <td class="table-align-right">This</td> <td class="table-align-center">This</td> </tr> <tr> <td class="table-align-left">column</td> <td class="table-align-right">column</td> <td class="table-align-center">column</td> </tr> <tr> <td class="table-align-left">will</td> <td class="table-align-right">will</td> <td class="table-align-center">will</td> </tr> <tr> <td class="table-align-left">be</td> <td class="table-align-right">be</td> <td class="table-align-center">be</td> </tr> <tr> <td class="table-align-left">left</td> <td class="table-align-right">right</td> <td class="table-align-center">center</td> </tr> <tr> <td class="table-align-left">aligned</td> <td class="table-align-right">aligned</td> <td class="table-align-center">aligned</td> </tr> </tbody> </table> <p>生成されるHTMLタグは以下のようになります。</p> <figure class="highlight html"><figcaption><span>sample-table.html</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre><td class="code"><pre><span class="line"><span class="tag"><<span class="title">table</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">thead</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">th</span> <span class="attribute">style</span>=<span class="value">"text-align:left"</span>></span>左寄せ<span class="tag"></<span class="title">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">th</span> <span class="attribute">style</span>=<span class="value">"text-align:right"</span>></span>右寄せ<span class="tag"></<span class="title">th</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">th</span> <span class="attribute">style</span>=<span class="value">"text-align:center"</span>></span>中央<span class="tag"></<span class="title">th</span>></span></span><br><span class="line"> <span class="tag"></<span class="title">tr</span>></span></span><br><span class="line"> <span class="tag"></<span class="title">thead</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">tbody</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">td</span> <span class="attribute">style</span>=<span class="value">"text-align:left"</span>></span>This<span class="tag"></<span class="title">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">td</span> <span class="attribute">style</span>=<span class="value">"text-align:right"</span>></span>This<span class="tag"></<span class="title">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">td</span> <span class="attribute">style</span>=<span class="value">"text-align:center"</span>></span>This<span class="tag"></<span class="title">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="title">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">td</span> <span class="attribute">style</span>=<span class="value">"text-align:left"</span>></span>column<span class="tag"></<span class="title">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">td</span> <span class="attribute">style</span>=<span class="value">"text-align:right"</span>></span>column<span class="tag"></<span class="title">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">td</span> <span class="attribute">style</span>=<span class="value">"text-align:center"</span>></span>column<span class="tag"></<span class="title">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="title">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">td</span> <span class="attribute">style</span>=<span class="value">"text-align:left"</span>></span>will<span class="tag"></<span class="title">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">td</span> <span class="attribute">style</span>=<span class="value">"text-align:right"</span>></span>will<span class="tag"></<span class="title">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">td</span> <span class="attribute">style</span>=<span class="value">"text-align:center"</span>></span>will<span class="tag"></<span class="title">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="title">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">td</span> <span class="attribute">style</span>=<span class="value">"text-align:left"</span>></span>be<span class="tag"></<span class="title">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">td</span> <span class="attribute">style</span>=<span class="value">"text-align:right"</span>></span>be<span class="tag"></<span class="title">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">td</span> <span class="attribute">style</span>=<span class="value">"text-align:center"</span>></span>be<span class="tag"></<span class="title">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="title">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">td</span> <span class="attribute">style</span>=<span class="value">"text-align:left"</span>></span>left<span class="tag"></<span class="title">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">td</span> <span class="attribute">style</span>=<span class="value">"text-align:right"</span>></span>right<span class="tag"></<span class="title">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">td</span> <span class="attribute">style</span>=<span class="value">"text-align:center"</span>></span>center<span class="tag"></<span class="title">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="title">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">td</span> <span class="attribute">style</span>=<span class="value">"text-align:left"</span>></span>aligned<span class="tag"></<span class="title">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">td</span> <span class="attribute">style</span>=<span class="value">"text-align:right"</span>></span>aligned<span class="tag"></<span class="title">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">td</span> <span class="attribute">style</span>=<span class="value">"text-align:center"</span>></span>aligned<span class="tag"></<span class="title">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="title">tr</span>></span></span><br><span class="line"> <span class="tag"></<span class="title">tbody</span>></span></span><br><span class="line"><span class="tag"></<span class="title">table</span>></span></span><br></pre></table></figure> <h3><span id="ul-ol-リスト表記">ul、ol リスト表記</span></h3><p>リスト表記は<code>-</code>と半角スペースを先頭に記述していきます。番号付きリスト表記は<code>1.</code>と半角スペースを先頭に記述していきます。またリストの説明を入れたい場合には先頭に半角スペース4つを追加し、前後を空行で挟みます。</p> <figure class="highlight markdown"><figcaption><span>sample-list.md</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre><td class="code"><pre><span class="line"><span class="bullet">- </span>hoge</span><br><span class="line"><span class="bullet">- </span>fuga</span><br><span class="line"><span class="bullet">- </span>foo</span><br><span class="line"></span><br><span class="line"><span class="code"> リストの説明(先頭に半角スペース4つを追加し、前後を空行で挟む)</span></span><br><span class="line"></span><br><span class="line"><span class="bullet">- </span>bar</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="bullet">1. </span>hoge</span><br><span class="line"><span class="bullet">2. </span>fuga</span><br><span class="line"><span class="bullet">3. </span>foo</span><br><span class="line"><span class="bullet">3. </span>bar</span><br></pre></table></figure> <p>便利なことに、番号付きリストの表記では番号が<em>連続していなくても</em>markdownレンダラーの方で上手いこと書き換えてくれます。上記のようにmarkdownを記述すると、以下のように表示されます。</p> <ul> <li>hoge</li> <li>fuga</li> <li><p>foo</p> <p> リストの説明(先頭に半角スペース4つを追加し、前後を空行で挟む)</p> </li> <li><p>bar</p> </li> </ul> <ol> <li>hoge</li> <li>fuga</li> <li>foo</li> <li>bar</li> </ol> <p>生成されるHTMLタグは以下のようになります。</p> <figure class="highlight html"><figcaption><span>sample-list.html</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre><td class="code"><pre><span class="line"><span class="tag"><<span class="title">ul</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">li</span>></span>hoge<span class="tag"></<span class="title">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">li</span>></span>fuga<span class="tag"></<span class="title">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">li</span>></span><span class="tag"><<span class="title">p</span>></span>foo<span class="tag"></<span class="title">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">p</span>></span>リストの説明(先頭に半角スペース4つを追加し、前後を空行で挟む)<span class="tag"></<span class="title">p</span>></span></span><br><span class="line"> <span class="tag"></<span class="title">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">li</span>></span><span class="tag"><<span class="title">p</span>></span>bar<span class="tag"></<span class="title">p</span>></span><span class="tag"></<span class="title">li</span>></span></span><br><span class="line"><span class="tag"></<span class="title">ul</span>></span></span><br><span class="line"></span><br><span class="line"><span class="tag"><<span class="title">ol</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">li</span>></span>hoge<span class="tag"></<span class="title">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">li</span>></span>fuga<span class="tag"></<span class="title">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">li</span>></span>foo<span class="tag"></<span class="title">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="title">li</span>></span>bar<span class="tag"></<span class="title">li</span>></span></span><br><span class="line"><span class="tag"></<span class="title">ol</span>></span></span><br></pre></table></figure> <h3><span id="em-strong-強調">em、strong 強調</span></h3><p>強調を表すには<code>*</code>で囲みます。</p> <figure class="highlight markdown"><figcaption><span>sample-em.md</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre><td class="code"><pre><span class="line"><span class="emphasis">*em*</span></span><br><span class="line"><span class="strong">**strong**</span></span><br></pre></table></figure> <p>上記のようにmarkdownを記述すると、以下のように表示されます。</p> <p><em>em</em><br><strong>strong</strong></p> <figure class="highlight html"><figcaption><span>sample-em.html</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre><td class="code"><pre><span class="line"><span class="tag"><<span class="title">em</span>></span>em<span class="tag"></<span class="title">em</span>></span></span><br><span class="line"><span class="tag"><<span class="title">strong</span>></span>strong<span class="tag"></<span class="title">strong</span>></span></span><br></pre></table></figure> <h3><span id="code-block-コードブロック">code block コード・ブロック</span></h3><p>コード・ブロック(本文とは切り離した複数行のプログラムコード)は<code>｀</code>3つで囲み、言語名を記述します。テーマやエンジンがサポートしている言語によってはシンタックスハイライトしてくれます。</p> <figure class="highlight markdown"><figcaption><span>sample-codeBlock.md</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre><td class="code"><pre><span class="line">｀｀｀javascript</span><br><span class="line">// 本文とは切り離した場所に複数行のプログラムコードを表示させます</span><br><span class="line">console.log("hoge");</span><br><span class="line">｀｀｀</span><br></pre></table></figure> <p>上記のようにmarkdownを記述すると、以下のように表示されます。</p> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre><td class="code"><pre><span class="line"><span class="comment">// 本文とは切り離した場所に複数行のプログラムコードを表示させます</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">"Hoge"</span>);</span><br></pre></table></figure> <h3><span id="inline-code-インラインコード">inline code インライン・コード</span></h3><p>インライン(本文中にプログラム・コードを含める)でコードを記述するには<code>｀</code>1つで囲みます。</p> <figure class="highlight markdown"><figcaption><span>sample-inlineCode.md</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre><td class="code"><pre><span class="line">本文中にコードを表示するには｀console.log("hoge");｀と記述します</span><br></pre></table></figure> <p>上記のようにmarkdownを記述すると、以下のように表示されます。</p> <p>本文中にコードを表示するには<code>console.log("hoge");</code>と記述します</p> <h3><span id="del-打ち消し">del 打ち消し</span></h3><p>打ち消しを表すには<code>~</code>2つで囲みます。</p> <figure class="highlight markdown"><figcaption><span>sample-del.md</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre><td class="code"><pre><span class="line">~~打ち消したい文字~~</span><br></pre></table></figure> <p>上記のようにmarkdownを記述すると、以下のように表示されます。</p> <p><del>打ち消したい文字</del></p> <p>生成されるHTMLタグは以下のようになります。</p> <figure class="highlight html"><figcaption><span>sample-del.html</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre><td class="code"><pre><span class="line"><span class="tag"><<span class="title">del</span>></span>打ち消したい文字<span class="tag"></<span class="title">del</span>></span></span><br></pre></table></figure> <h3><span id="kbd-キーボード">kbd キーボード</span></h3><p>キーボードはmarkdownではサポートされていないため、タグを直接記述する必要があるようです。markdownはhtmlが混在していてもそのまま表示してくれます。</p> <figure class="highlight html"><figcaption><span>sample-keyBoard.md</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre><td class="code"><pre><span class="line">キーボードは<span class="tag"><<span class="title">kbd</span>></span>Alt<span class="tag"></<span class="title">kbd</span>></span>のように記述します</span><br></pre></table></figure> <p>上記のようにhtmlを記述すると、以下のように表示されます。</p> <p>キーボードは<kbd>Alt</kbd>のように記述します</p> <h3><span id="blockquote-引用">blockquote 引用</span></h3><p>引用を表すには<code>></code>と半角スペースを先頭に記述していきます。また引用のネストも可能です。</p> <figure class="highlight markdown"><figcaption><span>sample-blockquote.md</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre><td class="code"><pre><span class="line"><span class="blockquote">> 引用</span></span><br><span class="line"><span class="blockquote">> > 引用のネスト</span></span><br><span class="line"></span><br><span class="line">サイトの引用</span><br><span class="line"><span class="blockquote">> Yahoo(サイト名)</span></span><br><span class="line"><span class="blockquote">> <cite>Yahoo! - <a href="http://yahoo.co.jp" title="">yahoo</a> </cite></span></span><br></pre></table></figure> <p>上記のようにmarkdownを記述すると、以下のように表示されます。</p> <blockquote> <p>引用</p> <blockquote> <p>引用のネスト</p> </blockquote> </blockquote> <p>サイトの引用</p> <blockquote> <p>Yahoo(サイト名)<br><cite>Yahoo! - <a href="http://yahoo.co.jp" class="link-gaTrack" data-linktype="link-external" rel="nofollow" target="_blank">yahoo</a> </cite></p> </blockquote> <h2><span id="hexoで使える独自タグ">hexoで使える独自タグ</span></h2><p>次に、静的ファイルジェネレータのhexoで独自に定義された便利なタグや、プラグインから利用できるタグをご紹介したいと思います。</p> <h3><span id="excerpt-記事の抜粋や概要">excerpt 記事の抜粋や概要</span></h3><p>hexoから標準で使えるタグです。記事のmarkdown中に<code><!-- more --></code>を記述すると、それ以前の文章が概要扱いとなり、read moreをサポートしているhexoテーマなどで概要表示ができます。また検索エンジンの結果で表示されるmeta descriptionにも使われる場合があります。</p> <figure class="highlight markdown"><figcaption><span>sample-excerpt.md</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre><td class="code"><pre><span class="line">moreの直前に記述した文字列は概要として扱われます。</span><br><span class="line"><span class="xml"><span class="comment"><!-- more --></span></span></span><br><span class="line">これ以降は記事の本文として扱われ、read moreをサポートしているテーマでは続きとして表示される内容となります。</span><br></pre></table></figure> <blockquote> <p>Read moreの表示例 (以下URLの3つ目の記事を参照)<br><cite>hexoテーマ - <a href="http://hexo.io/hexo-theme-landscape/" class="link-gaTrack" data-linktype="link-external" rel="nofollow" target="_blank">landscape</a> </cite></p> </blockquote> <h3><span id="toc-目次の自動生成">toc 目次の自動生成</span></h3><p>こちらもhexoで使えるタグです。tocとはthe table of contentsの略で、意味は目次です。hexo-tocというプラグインをインストールすると使えるようになります。</p> <figure class="highlight bash"><figcaption><span>bash</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre><td class="code"><pre><span class="line">$ npm install hexo-toc --save</span><br></pre></table></figure> <p>markdownで記述した文中の<code>h2</code>〜<code>h6</code>タグを収集し、目次をリスト表記で生成してくれます。こちらの記事でも前半で目次を貼り付けていますので、表示例は当記事の前半にてご確認ください。</p> <figure class="highlight markdown"><figcaption><span>sample-toc.md</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre><td class="code"><pre><span class="line">この直下に目次が生成されます。</span><br><span class="line"><span class="xml"><span class="comment"><!-- toc --></span></span></span><br></pre></table></figure> <h3><span id="youtubeやvimeoの埋め込み">youtubeやvimeoの埋め込み</span></h3><p>こちらもhexoから標準で使えるタグです。markdownに動画を埋め込むには、<code>https://www.youtube.com/watch?v=</code>の後ろに続く動画のID動画を記述していきます。</p> <figure class="highlight markdown"><figcaption><span>sample-movie.md</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre><td class="code"><pre><span class="line">{% youtube VtL0LAHLEY4 %}</span><br><span class="line">上記のようにしてyoutubeの動画を埋め込みます。VtL0LAHLEY4はURLに含まれる動画のIDです。</span><br><span class="line">{% vimeo 27246366 %}</span><br><span class="line">上記のようにしてVimeoの動画を埋め込みます。27246366はURLに含まれる動画のIDです。</span><br></pre></table></figure> <p>上記のようにmarkdownを記述すると、以下のように表示されます。動画の埋め込みの表示例はこちら。</p> <p>youtubeの動画を埋め込む。</p> <div class="video-container"><div class="loadingPutAbsolute" id="hexo-amp-id-1"><div class="loadingPutAbsoluteW"><div id="loader173616"><div class="loader red-bsm"><div class="ball-scale-multiple loader-inner"></div></div></div></div></div><amp-youtube data-videoid="VtL0LAHLEY4" height="1080" layout="responsive" width="1920"></amp-youtube></div> <p>引用元のyoutube動画：<a href="https://www.youtube.com/watch?v=VtL0LAHLEY4" class="link-gaTrack" data-linktype="link-external" rel="nofollow" target="_blank">https://www.youtube.com/watch?v=VtL0LAHLEY4</a></p> <p>vimeoの動画を埋め込む。</p> <div class="video-container"><div class="loadingPutAbsolute" id="hexo-amp-id-2"><div class="loadingPutAbsoluteW"><div id="loader644618"><div class="loader red-bsm"><div class="ball-scale-multiple loader-inner"></div></div></div></div></div><amp-vimeo data-videoid="27246366" height="1080" layout="responsive" width="1920"></amp-vimeo></div> <p>引用元のvimeo動画：<a href="https://vimeo.com/27246366" class="link-gaTrack" data-linktype="link-external" rel="nofollow" target="_blank">https://vimeo.com/27246366</a></p> <h3><span id="flickrの画像を埋め込む">flickrの画像を埋め込む</span></h3><p>こちらはプラグインのhexo-tag-flickrをインストールすると使えるタグです。flickrのPhoto IDを指定するだけで、簡単に画像を埋め込むことができます。インストールはnpmから可能です。</p> <figure class="highlight bash"><figcaption><span>bash</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre><td class="code"><pre><span class="line">$ npm install hexo-tag-flickr --save</span><br></pre></table></figure> <blockquote> <p>hexo-tag-flickr<br><cite>github - <a href="https://github.com/visioncan/hexo-tag-flickr" class="link-gaTrack" data-linktype="link-external" rel="nofollow" target="_blank" title="hexo-tag-flickr">hexo-tag-flickr</a> </cite></p> </blockquote> <p>markdownには以下のように記述します。<code>photo</code>は生成されるimgタグに指定したいクラス名(複数指定可)、<code>b</code>(=長辺1024px)は表示される画像のサイズの指定です。</p> <figure class="highlight markdown"><figcaption><span>sample-flickr.md</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre><td class="code"><pre><span class="line">{% flickr photo 24286149303 b %}</span><br><span class="line">上記のようにしてflickrの画像を表示させます。24286149303はflickrのURLに含まれるphoto IDです。</span><br></pre></table></figure> <p>上記のようにmarkdownを記述すると、以下のように表示されます。flickr画像の埋め込み例はこちら。</p> <div class="loadingPutAbsolute"><div class="loadingPutAbsoluteW"><div id="loader65613"><div class="loader blue-bsm"><div class="ball-scale-multiple loader-inner"></div></div></div></div></div><div class="img-wrapper imgw"><span class="imgg-key-off imggw"></span><span class="imgg"></span><p><div class="amp-img-wrapper"><amp-img layout="responsive" src="https://farm2.staticflickr.com/1516/24286149303_4d1bdce69b_b.jpg" height="688" width="1024"></amp-img></div><p></div> <h3><span id="instagramを埋め込む">instagramを埋め込む</span></h3><p>こちらもプラグインによって埋め込み可能です。hexo-tag-instagramをインストールすると、短い記述で埋め込みができます。</p> <figure class="highlight bash"><figcaption><span>bash</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre><td class="code"><pre><span class="line">$ npm install hexo-tag-instagram --save</span><br></pre></table></figure> <blockquote> <p>hexo-tag-instagram<br><cite>github - <a href="https://github.com/tea3/hexo-tag-instagram" class="link-gaTrack" data-linktype="link-external" rel="nofollow" target="_blank" title="hexo-tag-instagram">hexo-tag-instagram</a> </cite></p> </blockquote> <figure class="highlight markdown"><figcaption><span>sample-instagram.md</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre><td class="code"><pre><span class="line">{% instagram https://www.instagram.com/p/3yNx8hE6iE/ %}</span><br><span class="line">上記のようにしてインスタグラムのポストをブログに表示させます。3yNx8hE6iEはポストのURLに含まれるIDです。</span><br></pre></table></figure> <p>上記のように記述するとインスタグラムの投稿記事をブログに表示させる事ができます。</p> <div class="instagram-wrapper"><amp-instagram data-shortcode="3yNx8hE6iE" height="1080" layout="responsive" width="1080"></amp-instagram></div><p>引用元のポスト：<a href="https://www.instagram.com/p/3yNx8hE6iE/" class="link-gaTrack" data-linktype="link-external" rel="nofollow" target="_blank">https://www.instagram.com/p/3yNx8hE6iE/</a></p> <h3><span id="twitterツイートを埋め込む">twitterツイートを埋め込む</span></h3><p>こちらもプラグインによって埋め込み可能です。hexo-tag-twitterをインストールすると、短い記述で埋め込みができます。</p> <figure class="highlight bash"><figcaption><span>bash</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre><td class="code"><pre><span class="line">$ npm install hexo-tag-twitter --save</span><br></pre></table></figure> <blockquote> <p>hexo-tag-twitter<br><cite>github - <a href="https://github.com/tea3/hexo-tag-twitter" class="link-gaTrack" data-linktype="link-external" rel="nofollow" target="_blank" title="hexo-tag-twitter">hexo-tag-twitter</a> </cite></p> </blockquote> <figure class="highlight markdown"><figcaption><span>simple-twitter.md</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre><td class="code"><pre><span class="line">{% twitter https://twitter.com/tea0828/status/819885806714138624 %}</span><br></pre></table></figure> <p>上記のように記述すると、以下のように表示されます。</p> <div class="twitter-wrapper"><div class="twitter-container"><amp-twitter data-tweetid="819885806714138624" height="600" layout="responsive" width="800"></amp-twitter></div></div><p>引用元のツイート：<a href="https://twitter.com/tea0828/status/819885806714138624" class="link-gaTrack" data-linktype="link-external" rel="nofollow" target="_blank">https://twitter.com/tea0828/status/819885806714138624</a></p> <h3><span id="sound-cloudのトラックを埋め込む">Sound Cloudのトラックを埋め込む</span></h3><p>こちらもプラグインによって埋め込みが可能です。hexo-tag-soundcloudをインストールすると、短い記述で埋め込みができるようになります。</p> <figure class="highlight bash"><figcaption><span>bash</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre><td class="code"><pre><span class="line">$ npm install hexo-tag-twitter --save</span><br></pre></table></figure> <blockquote> <p>hexo-tag-soundcloud<br><cite>github - <a href="https://github.com/tea3/hexo-tag-soundcloud" class="link-gaTrack" data-linktype="link-external" rel="nofollow" target="_blank" title="hexo-tag-soundcloud">hexo-tag-soundcloud</a> </cite></p> </blockquote> <figure class="highlight markdown"><figcaption><span>simple-soundcloud.md</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre><td class="code"><pre><span class="line">{% soundcloud https://soundcloud.com/officialmedasin/daydream-ft-joba-1 %}</span><br></pre></table></figure> <p>上記のように記述すると、以下のように表示されます。</p> <div class="soundcloud-wrapper"><amp-iframe frameborder="0" height="450" layout="fixed-height" sandbox="allow-scripts allow-same-origin allow-popups" src="https://w.soundcloud.com/player/?url=https://soundcloud.com/officialmedasin/daydream-ft-joba-1&auto_play=false&hide_related=false&show_comments=false&show_user=false&show_reposts=false&visual=true"><amp-img layout="fill" src="/amp-dist/sample/sample-placeholder.png" placeholder=""></amp-img></amp-iframe></div> <p>引用元のページ：<a href="https://soundcloud.com/officialmedasin/daydream-ft-joba-1" class="link-gaTrack" data-linktype="link-external" rel="nofollow" target="_blank">https://soundcloud.com/officialmedasin/daydream-ft-joba-1</a></p> <h3><span id="google-mapを埋め込む">google mapを埋め込む</span></h3><p>こちらもプラグインによって埋め込み可能です。hexo-tag-googlemapsをインストールすると、緯度と経度を指定するだけでgoogle mapが埋め込まれる便利なタグです。</p> <figure class="highlight bash"><figcaption><span>bash</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre><td class="code"><pre><span class="line">$ npm install hexo-tag-googlemaps --save</span><br></pre></table></figure> <blockquote> <p>hexo-tag-googlemaps<br><cite>github - <a href="https://github.com/visioncan/hexo-tag-googlemaps" class="link-gaTrack" data-linktype="link-external" rel="nofollow" target="_blank" title="hexo-tag-googlemaps">hexo-tag-googlemaps</a> </cite></p> </blockquote> <p>markdownには以下のように記述します。以下の<code>15</code>は地図のズーム倍率です。<code>100%</code>は表示される幅、<code>250px</code>は高さとなります。</p> <figure class="highlight markdown"><figcaption><span>sample-googleMap.md</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre><td class="code"><pre><span class="line">{% googlemaps 35.3129923 138.5873496 15 100% 250px %}</span><br><span class="line"> 白糸の滝, 35.3129923, 138.5873496</span><br><span class="line">{% endgooglemaps %}</span><br><span class="line">上記のように記述してgoogle mapを表示させます。35.3129923は緯度、138.5873496は経度、15はズーム倍率</span><br></pre></table></figure> <p>google mapの地図の埋め込み例はこちら</p> <div class="gMap-wrapper"><div class="loadingPutAbsolute"><div class="loadingPutAbsoluteW"><div id="loader255619"><div class="loader ylo-bsm"><div class="ball-scale-multiple loader-inner"></div></div></div></div></div><div class="gMap loaderID-255619" id="googleMap6503" data-offset="1200"> </div><p class="openMap"><span class="sns-icon-block mapMarker-icon"></span> 白糸の滝の地図を<a href="http://maps.google.com/maps?q=35.3129923%2C138.5873496" class="mapOpen-gaTrack" target="_blank" data-usemapapp="use browser">ブラウザ</a>または<a href="http://maps.apple.com/?q=35.3129923%2C138.5873496" class="mapOpen-gaTrack" target="_blank" data-usemapapp="use app">アプリ</a>で開く</div> <h3><span id="画像の比較jquery-twentytwenty">画像の比較(jQuery TwentyTwenty)</span></h3><p>画像でビフォー・アフターをスライド表示させます。hexo-tag-twentytwentyを使うと、簡単な記述で比較画像を表示させることができるようになります。</p> <figure class="highlight bash"><figcaption><span>bash</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre><td class="code"><pre><span class="line">$ npm install hexo-tag-twentytwenty --save</span><br></pre></table></figure> <p>記述方法は、markdownに、以下の<code>twtw</code>タグを記述するだけでOKです。<code>before.jpg</code>はビフォーの画像。<code>after.jpg</code>はアフターの画像になります。</p> <figure class="highlight markdown"><figcaption><span>simple-before-after.md</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre><td class="code"><pre><span class="line">{% twtw before.jpg after.jpg %}</span><br></pre></table></figure> <p>上記のように記述すると、以下のように表示されます。</p> <div class="twentytwenty-container" id="hexo-amp-id-3"><p><div class="amp-img-wrapper"><amp-img layout="responsive" src="https://c1.staticflickr.com/9/8139/29091082783_4b1b40c0c2_b.jpg" height="1024" width="722"></amp-img></div><p><p><div class="amp-img-wrapper"><amp-img layout="responsive" src="https://farm9.staticflickr.com/8494/29050374882_8a56d9ff0d_b.jpg" height="1024" width="722"></amp-img></div><p></div><h3><span id="応用編hexoで独自に定義したタグを使う">応用編！hexoで独自に定義したタグを使う</span></h3><p>hexoでは通常のmarkdown記述が利用できる上に、前述したような便利な独自タグをプラグインから利用できるようになっています。しかし、これでも不十分である場合には独自にプラグイン開発するか、<code>themes/your-theme/scripts</code>下でタグを定義することもできます。詳しくは<code>hexo.extend.tag.register</code>について解説されてるオフィシャルサイトのドキュメントをご覧ください。</p> <blockquote> <p>hexo<br><cite>hexo - <a href="https://hexo.io/api/tag.html" class="link-gaTrack" data-linktype="link-external" rel="nofollow" target="_blank" title="hexo-tag-googlemaps">tag</a> </cite></p> </blockquote> <h4><span id="実装例1instagramの投稿記事を埋め込むhexo-markdownタグ">実装例1：Instagramの投稿記事を埋め込むHexo markdownタグ</span></h4><p>独自定義するタグの実装例をいくつか挙げたいと思います。まずは、先程も例を挙げたインスタグラムの投稿記事を埋め込むプラグインを見ていきたいと思います。前述と同じ説明になりますが、下記のコードは<code></code>タグを記述して、簡単にインスタグラムの埋め込みHTMLを生成させるものです。</p> <figure class="highlight markdown"><figcaption><span>sample-insta.md</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre><td class="code"><pre><span class="line">{% instagram 8ppwIyE6lU %}</span><br><span class="line">上記のようにしてinstagramの投稿記事を埋め込みます。「8ppwIyE6lU」は記事URLに含まれるショートコードです。</span><br></pre></table></figure> <p>上記のようにmarkdownを記述すると、以下のように表示されます。</p> <div class="instagram-wrapper"><amp-instagram data-shortcode="8ppwIyE6lU" height="1080" layout="responsive" width="1080"></amp-instagram></div><p>引用元のinstagram記事：<a href="https://www.instagram.com/p/8ppwIyE6lU/" class="link-gaTrack" data-linktype="link-external" rel="nofollow" target="_blank">https://www.instagram.com/p/8ppwIyE6lU/</a></p> <p>上記のタグが機能するように、<code>themes/your-theme/scripts/extend.js</code>で以下のように定義しました。コードの処理内容を説明すると、タグに渡される記事のショートコードを元に、Instagramの埋め込みHTMLを返します。メリットとしては、以下のコードを最新の内容にメンテナンスすることで、全ての記事対して最新の埋め込みコードが適用できる点です。</p> <figure class="highlight javascript"><figcaption><span>extend.js</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre><td class="code"><pre><span class="line">hexo.extend.tag.register(<span class="string">'instagram'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">args, content</span>)</span>{</span><br><span class="line"></span><br><span class="line"> <span class="comment">// markdown内で {% instagram <span class="label">xxx %} と記述されている部分からxxxの箇所を取得する。(xxxは引数argの要素0番目)</span></span></span><br><span class="line"> <span class="keyword">var</span> postId = args[<span class="number">0</span>];</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// instagramの埋め込みHTML。現時点ではバージョン7を利用している</span></span><br><span class="line"> <span class="keyword">var</span> returnHTML = <span class="string">'<blockquote class="instagram-media" data-instgrm-version="7" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px auto; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div><p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/p/'</span> + postId + <span class="string">'/" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank"></a></p></div></blockquote><script async defer src="//platform.instagram.com/en_US/embeds.js"></script>'</span>;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 生成したhtmlをタグの出力結果として返す</span></span><br><span class="line"> <span class="keyword">return</span> returnHTML;</span><br><span class="line">},{</span><br><span class="line"> <span class="keyword">async</span>: <span class="literal">true</span>,</span><br><span class="line"> ends: <span class="literal">false</span></span><br><span class="line">});</span><br></pre></table></figure> <p>こちらは<a href="/p/hexo-tag-instagram/" class="link-gaTrack" data-linktype="link-internal">プラグイン</a>として、実際にnpmに公開していますのでインストールして使うこともできます。</p> <h4><span id="実装例2注意書き欄のhtmlを生成するhexo-markdownタグ">実装例2：注意書き欄のHTMLを生成するHexo markdownタグ</span></h4><p>続いて、もう一つ実装例をご紹介したいと思います。Hexoの記事で<a href="http://v4-alpha.getbootstrap.com/components/alerts/" class="link-gaTrack" data-linktype="link-external" rel="nofollow" target="_blank" title="Bootstrap">BootstrapのAlerts</a>みたいな注意書き欄を簡単に表示させたいなと思いました。そこで当ブログでは、注意書きの欄をmarkdownから簡単に生成できるように、<code>hexo.extend.tag.register</code>で独自タグを拡張定義しています。markdownの記述例は以下のような形です。</p> <figure class="highlight markdown"><figcaption><span>sample-att.md</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre><td class="code"><pre><span class="line">{% tag_round att 注意書きのサンプルタイトル %}</span><br><span class="line">タグの中で注意書きの本文を記述します。タグの内部でも<span class="code">`markdown`</span>の記法が使えます。</span><br><span class="line">{% endtag_round %}</span><br></pre></table></figure> <p>上記のようにmarkdownを記述すると、以下のように表示されます。</p> <div class="attention"><h5 class="label"><span id="注意書きのサンプルタイトル"><span class="sns-icon exclamation-circle-icon"></span>注意書きのサンプルタイトル</span></h5><p class="label">タグの中で注意書きの本文を記述します。こちらの中でも<code>markdown</code>の記法が使えます。</div> <p>上記のタグが機能するように、<code>themes/your-theme/scripts/extend.js</code>で以下のように定義しました。ここで一つ注意点ですが、通常タグで囲ったテキストは関数に渡される文字列として扱われるので、<em>markdownとしてHTMLにレンダリングされません</em>。そこで、hexoのmarkdownレンダラにも使用している<a href="https://github.com/chjj/marked" class="link-gaTrack" data-linktype="link-external" rel="nofollow" target="_blank" title="github - chjj/marked">marked</a>を使って<code>require</code>してHTMLにレンダリングさせます。</p> <figure class="highlight javascript"><figcaption><span>extend.js</span></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre><td class="code"><pre><span class="line"><span class="keyword">var</span> mk = <span class="built_in">require</span>(<span class="string">'marked'</span>);</span><br><span class="line">hexo.extend.tag.register(<span class="string">'tag_round'</span>, <span class="function"><span class="keyword">function</span>(<span class="params">args, content</span>)</span>{</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// 引数の取得</span></span><br><span class="line"> <span class="keyword">var</span> labelType = args[<span class="number">0</span>];</span><br><span class="line"> <span class="keyword">var</span> title = <span class="string">""</span>;</span><br><span class="line"> <span class="keyword">var</span> i = <span class="number">0</span>;</span><br><span class="line"> </span><br><span class="line"> <span class="comment">//引数2つ目以降を文字列として結合</span></span><br><span class="line"> <span class="keyword">for</span>(i = <span class="number">1</span>; i < args.length; i++){</span><br><span class="line"> title += ( i!=<span class="number">1</span> ? <span class="string">" "</span> : <span class="string">""</span> ) + args[i];</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// markdownの記述をHTMLにレンダリングして、改行を除去する。</span></span><br><span class="line"> <span class="keyword">var</span> mkdHtml = mk(content).replace(<span class="regexp">/\n/g</span>,<span class="string">""</span>);</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// replace escapeTAG tag</span></span><br><span class="line"> <span class="keyword">var</span> escapeTAGEscArr = [];</span><br><span class="line"> <span class="keyword">var</span> escapeTAGMatch = mkdHtml.match(<span class="regexp">/\<(ol|ul|h6).*?\<\/(ol|ul|h6)\>/g</span>);</span><br><span class="line"> <span class="keyword">var</span> innerReplace = <span class="string">""</span>;</span><br><span class="line"> <span class="keyword">if</span>(escapeTAGMatch){</span><br><span class="line"> <span class="keyword">for</span>( i = <span class="number">0</span>; i < escapeTAGMatch.length; i++){</span><br><span class="line"> mkdHtml = mkdHtml.replace(escapeTAGMatch[i],<span class="string">"<!--escapeTAG"</span>+i+<span class="string">"-->"</span>);</span><br><span class="line"> innerReplace = escapeTAGMatch[i];</span><br><span class="line"> innerReplace = innerReplace.replace(<span class="regexp">/\<h6\s/g</span>,<span class="string">'<h6 class="label" '</span>);</span><br><span class="line"> escapeTAGEscArr.push(innerReplace);</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <span class="comment">//replace p tag</span></span><br><span class="line"> mkdHtml = mkdHtml.replace(<span class="regexp">/\<p\>/g</span>,<span class="string">'<p class="label">'</span>);</span><br><span class="line"> </span><br><span class="line"> <span class="comment">// replace escapeTAG return</span></span><br><span class="line"> escapeTAGMatch = mkdHtml.match(<span class="regexp">/\<\!\-\-escapeTAG[0-9]+\-\-\>/g</span>);</span><br><span class="line"> <span class="keyword">if</span>(escapeTAGMatch){</span><br><span class="line"> <span class="keyword">for</span>(i=<span class="number">0</span>; i<escapeTAGMatch.length; i++){</span><br><span class="line"> <span class="keyword">var</span> escapeTAGID = escapeTAGMatch[i].match(<span class="regexp">/[0-9]+/</span>);</span><br><span class="line"> mkdHtml = mkdHtml.replace( escapeTAGMatch[i] , escapeTAGEscArr[<span class="built_in">Number</span>(escapeTAGID[<span class="number">0</span>])] );</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="comment">//引数1つ目の値に応じて クラス名やアイコンを変える。</span></span><br><span class="line"> <span class="keyword">var</span> dClass = <span class="string">"attention"</span>;</span><br><span class="line"> <span class="keyword">var</span> iconClass = <span class="string">"exclamation-circle-icon"</span>;</span><br><span class="line"> <span class="keyword">if</span>(labelType == <span class="string">"att"</span>){</span><br><span class="line"> <span class="comment">// 注意書き</span></span><br><span class="line"> dClass = <span class="string">"attention"</span>;</span><br><span class="line"> iconClass = <span class="string">"exclamation-circle-icon"</span>;</span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(labelType == <span class="string">"memo"</span>){</span><br><span class="line"> <span class="comment">//メモ</span></span><br><span class="line"> dClass = <span class="string">"r-memo"</span>;</span><br><span class="line"> iconClass = <span class="string">"file-text-o-icon"</span>;</span><br><span class="line"> }<span class="keyword">else</span> <span class="keyword">if</span>(labelType == <span class="string">"dl"</span>){</span><br><span class="line"> <span class="comment">//ダウンロード</span></span><br><span class="line"> dClass = <span class="string">"r-download"</span>;</span><br><span class="line"> iconClass = <span class="string">"download-icon"</span>;</span><br><span class="line"> }</span><br><span class="line"> </span><br><span class="line"> <span class="keyword">return</span> <span class="string">'<div class="'</span>+ dClass +<span class="string">'"><h5 class="label"><span class="sns-icon '</span>+ iconClass +<span class="string">'"></span>'</span> + title + <span class="string">'</h5>'</span>+ mkdHtml +<span class="string">'</div>'</span>;</span><br><span class="line">},{</span><br><span class="line"> <span class="keyword">async</span>: <span class="literal">true</span>,</span><br><span class="line"> ends: <span class="literal">true</span></span><br><span class="line">});</span><br></pre></table></figure> <h2><span id="備録markdownのエディタとwebツール">(備録)markdownのエディタとWebツール</span></h2><p>markdownのエディタは<a href="https://www.sublimetext.com/3" class="link-gaTrack" data-linktype="link-external" rel="nofollow" target="_blank">Sublime text 3</a>を使っています。またWebページ上でmarkdownの結果をすぐに確認したい時には<a href="https://jonschlinkert.github.io/remarkable/demo/" class="link-gaTrack" data-linktype="link-external" rel="nofollow" target="_blank">Remarkable</a>や<a href="http://dillinger.io/" class="link-gaTrack" data-linktype="link-external" rel="nofollow" target="_blank">Dillinger</a>を使っています。Remarkableは２つの画面で構成されていて、左側にmarkdownを記述していくと瞬時にHTMLへ変換してくれる大変便利なサービスとなっています。Dillingerも同様のサービスです。</p> <blockquote> <p>markdownを速攻プレビューできる「Remarkable」<br><cite><a href="https://jonschlinkert.github.io/remarkable/demo/" class="link-gaTrack" data-linktype="link-external" rel="nofollow" target="_blank" title="Remarkable">Remarkable DEMO</a> </cite></p> </blockquote> <h2><span id="最後に">最後に</span></h2><p>いかがだったでしょうか？今回はmarkdownの一般的な記法と、ブログジェネレータのhexoで使える独自タグ、またその拡張方法について触れました。markdownで記事を書く際や、タグの拡張を検討されている場合の参考にして頂ければ幸いです。</p> <div class="babylink-box"><div class="babylink-wrapper"><div class="babylink-image"><a href="https://www.amazon.co.jp/gp/product/4800710979/ref=as_li_tf_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4800710979&linkCode=as2&tag=teaafter2010-22" class="link-gaTrack" data-linktype="link-external" rel="nofollow" target="_blank" data-at="見込み客が増える 儲かるブログの書き方講座" data-linkelm="AmazonImg"><div class="loadingPutAbsolute"><div class="loadingPutAbsoluteW"><div id="loader282614"><div class="loader blue-bsm"><div class="ball-scale-multiple loader-inner"></div></div></div></div></div><p><div class="amp-img-wrapper"><amp-img layout="responsive" src="https://images-fe.ssl-images-amazon.com/images/I/61gpQMQY06L._SL500_.jpg" height="500" width="353"></amp-img></div><p></p></a></div><div class="babylink-info"><div class="babylink-title"><a href="https://www.amazon.co.jp/gp/product/4800710979/ref=as_li_tf_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4800710979&linkCode=as2&tag=teaafter2010-22" class="link-gaTrack" data-linktype="link-external" rel="nofollow" target="_blank" data-at="見込み客が増える 儲かるブログの書き方講座" data-linkelm="AmazonTitle">見込み客が増える 儲かるブログの書き方講座</a></div></div><div class="babylink-amazonBtn"><a href="https://www.amazon.co.jp/gp/product/4800710979/ref=as_li_tf_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=4800710979&linkCode=as2&tag=teaafter2010-22" class="link-gaTrack amb" data-linktype="link-external" rel="nofollow" target="_blank" title="見込み客が増える 儲かるブログの書き方講座" data-at="見込み客が増える 儲かるブログの書き方講座" data-linkelm="AmazonBtn"><span class="sns-icon-block amazon-icon"></span> Amazonでレビューを見る</a></div></div><div class="aicon"><span class="amazon-background-wrapp icon-round"><span class="sns-icon link-icon" id="hexo-amp-id-4"></span></span></div></div>
<div class="ad-footer">
<amp-ad data-ad-client="ca-pub-1264439991284290" data-ad-slot="1190875564" height="250" type="adsense" width="320" layout="responsive">
</amp-ad>
</div>
<div class="social-share">
<amp-social-share height="40" type="twitter" width="40"></amp-social-share>
<amp-social-share height="40" type="facebook" width="40" data-param-app_id="1020441797977517" data-param-href="https://photo-tea.com/p/hexo-markdown-notation/" data-param-text=""></amp-social-share>
<amp-social-share height="40" type="gplus" width="40"></amp-social-share>
</div>
</div>
</article>
<div class="meta-content">
<div class="meta-wrapper">
<h6 class="categories">Category</h6>
<div class="article-categories">
<ul class="article-categories-list">
<li class="article-categories-list-item">
<a href="/categories/it/" class="article-categories-list-link" class="link-gaTrack" data-linktype="link-categories">
IT関連
</a>
</li>
</ul>
</div>
</div>
<div class="meta-wrapper">
<h6 class="tag">Tag</h6>
<div class="article-tag">
<ul class="article-tag-list">
<li class="article-tag-list-item">
<a href="/tags/html5/" class="article-tag-list-link" class="link-gaTrack" data-linktype="link-tag">
HTML5
</a>
</li>
<li class="article-tag-list-item">
<a href="/tags/hexo-npm-nodejs/" class="article-tag-list-link" class="link-gaTrack" data-linktype="link-tag">
Hexo
</a>
</li>
<li class="article-tag-list-item">
<a href="/tags/training-programing/" class="article-tag-list-link" class="link-gaTrack" data-linktype="link-tag">
IT・プログラミング
</a>
</li>
<li class="article-tag-list-item">
<a href="/tags/javascript/" class="article-tag-list-link" class="link-gaTrack" data-linktype="link-tag">
javascript
</a>
</li>
<li class="article-tag-list-item">
<a href="/tags/markdown/" class="article-tag-list-link" class="link-gaTrack" data-linktype="link-tag">
markdown
</a>
</li>
<li class="article-tag-list-item">
<a href="/tags/nodejs/" class="article-tag-list-link" class="link-gaTrack" data-linktype="link-tag">
node.js
</a>
</li>
<li class="article-tag-list-item">
<a href="/tags/series-hexo-how-to/" class="article-tag-list-link" class="link-gaTrack" data-linktype="link-tag">
連載：Hexoの使い方とブログの初め方
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<footer id="footer">
<div class="site-author-info">
<div class="site-author-info-wrapper">
<div class="gravatar-wrapper">
<div class="gravatar-area">
<amp-img layout="responsive" src="https://c5.staticflickr.com/1/690/32169575556_66266d43a8_z.jpg" height="150" width="150" alt="gravatar" class="circle responsive-img"></amp-img>
</div>
</div>
<div class="authorCap-wrapper">
<h6 class="authorCap">tea
<span class="authorReading">(てぃー)</span>
</h6>
<p class="site-author-desc">
ゆるふわポートレートや自然風景をのんびり撮影しています。その他の趣味は音楽制作とメダカの鑑賞。撮影や写真掲載等のご依頼については、SNSまたはお問い合わせフォームまでお願いいたします。
</p>
<div class="sns-link">
<a href="https://twitter.com/tea0828" target="_blank">
<i class="fa fa-twitter"></i>
</a>
<a href="https://www.instagram.com/gogo_tea/" target="_blank">
<i class="fa fa-instagram"></i>
</a>
<a href="https://www.facebook.com/masashibat" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a href="https://ws.formzu.net/fgen/S63420755/" target="_blank">
<i class="fa fa-envelope"></i>
</a>
</div>
</div>
</div>
</div>
<div class="homeLink">
<a href="/">Home</a>
</div>
<div class="copyright-tool">
<div class="copyright-title">
<span>
© 2017 tea
</span>
</div>
<div class="copyright-notice">
<p>
コンテンツの保存及び転載は固くお断りいたします。当サイトに記載されるコンテンツ(文章・画像等)は著作権により保護されています。万が一コンテンツや写真の盗用・二次利用が見つかった場合には500pxの写真販売価格を参考に差止め請求及び使用料または損害賠償請求をさせて頂く場合がございますので予めご了承下さい。記事に関するお問い合わせや寄稿については上記のSNSまでご連絡をお願いいたします。
</p>
</div>
</div>
</footer>
</div>
<div id="totop"><a href="#"></a></div>