My Snippets

頻繁に使用するHtmlタグ等を Sublimetext の Snippet に登録したので、その覚え書き

 

Google jQuery の埋め込み

Sublime Snippet --> google_j {Tab}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

 

外部CSSファイルのリンク

Sublime Snippet --> css_link {Tab}

<link href=" /*filepath*/ " rel="stylesheet" type="text/css"> filepath に参照するCSSファイルのパスを記述。

 

外部JavaScriptファイルのリンク

Sublime Snippet --> js_link {Tab}

<script type="text/javascript" src=" /*filepath*/ "></script> filepath に参照するScriptファイルのパスを記述。

 

<div id="wrap"> タグの挿入

<div id="wrap">
    <!-- Html Contents -->
<p id="page-top"><a href="#wrap">PAGE TOP</a></p>
<!-- /#wrap --></div>

 

外部へのリンクを新規ウィンドウ（タブ）で開く Scriptの埋め込み

Sublime Snippet --> open_blank {Tab}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="JavaScript">
    $(document).ready( function () {
        $("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');
    })
</script>

Snippet挿入後、ChangeChar を「$」に書き換える。

 

ページ内リンクの idタグ挿入

Sublime Snippet --> id_link {Tab}

<p><a id=" /*name*/ "></a></p> name に id名を入力 - MarkdownTOC^2 で目次を作成した場合にページ内リンクで使用可能。
目次部分は [タイトル](id_name) で実現。

 

「page-top」のCSSとスクリプト挿入

Sublime Snippet --> page_top {Tab}

id_wrap とセットで使う。 page_top は <head> タグ内に、id_wrap は <body> タグ内に記述。

<style type="text/css">#page-top {position: fixed;bottom: 20px;right: 20px;font-size: 77%;}#page-top a {background: #666;text-decoration: none;color: #fff;width: 100px;padding: 18px 0;text-align: center;display: block;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;}#page-top a:hover {text-decoration: none;background: #999;}</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var topBtn = $('#page-top');    
topBtn.hide();
$(window).scroll(function () {if ($(this).scrollTop() > 100) {topBtn.fadeIn();} else {topBtn.fadeOut();}});
topBtn.click(function () {$('body,html').animate({scrollTop: 0}, 500);return false;});
});
</script>
  • Snippet 挿入後、アクティブカーソルの文字を「＄」に変更（5箇所あり）する。

 

空白行(blank)の挿入

Sublime Snippet --> blank {Tab}

<p>&nbsp;</p> - 行間を空けたい時に使用

 

注釈 - Annotation

対象語句 --> <sub><a name="refname">[^name](#name)</a></sub>
注釈文 --> <a name="name">^name.</a> description [↩](#refname)

文章内の語句に注釈<sub><a name="ref1">[^1](#1)</a></sub>をつける。

<!-- 注釈文 -->
<a name="1">^1.</a> description [↩](#ref1)
  • HTML表示

文章内の語句に注釈^1をつける。

 

Snippets

- Google jQuery の埋め込み

<snippet>
    <content><![CDATA[
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>google_j</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

 

<snippet>
    <content><![CDATA[<link href="${1:filepath}" rel="stylesheet" type="text/css">]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>css_link</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>text.html</scope>
</snippet>

 

<snippet>
    <content><![CDATA[
<script type="text/javascript" src="${1:filepath}"></script>
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>js_link</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>text.html</scope>
</snippet>

 

<snippet>
    <content><![CDATA[<div id="wrap">]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>wrap_begin</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>text.html</scope>
</snippet>


<snippet>
    <content><![CDATA[
<p id="page-top"><a href="#wrap">PAGE TOP</a></p>
<!-- /#wrap --></div>
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>wrap_end</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>text.html</scope>
</snippet>

 

<snippet>
    <content><![CDATA[
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="JavaScript">
    ${1:ChangeChar}(document).ready( function () {
        ${1:ChangeChar}("a[href^='http']:not([href*='" + location.hostname + "'])").attr('target', '_blank');
    })
</script>
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>open_blank</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

 

<snippet>
    <content><![CDATA[
<p><a id="${1:name}"></a></p>
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>id_link</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

 

<snippet>
    <content><![CDATA[
<style type="text/css">#page-top {position: fixed;bottom: 20px;right: 20px;font-size: 77%;}#page-top a {background: #666;text-decoration: none;color: #fff;width: 100px;padding: 18px 0;text-align: center;display: block;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;}#page-top a:hover {text-decoration: none;background: #999;}</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
${1:&-ChangeChar}(function() {
var topBtn = ${2:&-ChangeChar}('#page-top');    
topBtn.hide();
${3:&-ChangeChar}(window).scroll(function () {if (${4:&-ChangeChar}(this).scrollTop() > 100) {topBtn.fadeIn();} else {topBtn.fadeOut();}});
topBtn.click(function () {${5:&-ChangeChar}('body,html').animate({scrollTop: 0}, 500);return false;});
});
</script>
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>page_top</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

 

<snippet>
    <content><![CDATA[<p>&nbsp;</p>]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>blank</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

 

&lt;snippet&gt;
    &lt;content&gt;&lt;![CDATA[
&lt;sub&gt;&lt;a name=&quot;ref${1:name}&quot;&gt;[^${1:name}](#${1:name})&lt;/a&gt;&lt;/sub&gt;
]]&gt;&lt;/content&gt;
    &lt;!-- Optional: Set a tabTrigger to define how to trigger the snippet --&gt;
    &lt;tabTrigger&gt;anno_word&lt;/tabTrigger&gt;
    &lt;!-- Optional: Set a scope to limit where the snippet will trigger --&gt;
    &lt;!-- &lt;scope&gt;source.python&lt;/scope&gt; --&gt;
&lt;/snippet&gt;


&lt;snippet&gt;
    &lt;content&gt;&lt;![CDATA[
&lt;a name=&quot;${1:name}&quot;&gt;^${1:name}.&lt;/a&gt; ${2:description} [↩](#ref${1:name})
]]&gt;&lt;/content&gt;
    &lt;!-- Optional: Set a tabTrigger to define how to trigger the snippet --&gt;
    &lt;tabTrigger&gt;anno_disc&lt;/tabTrigger&gt;
    &lt;!-- Optional: Set a scope to limit where the snippet will trigger --&gt;
    &lt;!-- &lt;scope&gt;source.python&lt;/scope&gt; --&gt;
&lt;/snippet&gt;

 

^1. 注釈 - Annotation ↩
^2. Markdownの目次自動作成（ST2 PlugIn）を参照 ↩

PAGE TOP