スタイルガイド用に要素のソースを確認できるボタンを作りました。
ボタンを押すとその直上の要素をソース(文字列)として表示します。

これを使うとスタイルガイドの要素がどんなソースで書かれているかすぐに確認でき、コピーするときにも便利です。

    【導入方法】
  1. javascriptを適当なところに追加する
  2. スタイルガイドのそれぞれの要素の直下にボタン要素を入れる

【デモ】

  • リンゴ
  • ゴリラ
  • バナナ

【HTML】

<ul class="demo">
    <li>リンゴ</li>
    <li>ゴリラ</li>
    <li>バナナ</li>
</ul>
<button class="codeBtn">クリック</button>

【Javascript】

$(function(){

	//js用のタグで囲む
	$('.codeBtn').prev().wrap('<div class="code"></div>');

	//元のソースを配列に入れる
	var origin = [];
	$('.code').each(function(){
		var code = $(this).html();
		origin.push(code);
	});

	var targets = ['&', '<', '>' ,'"','\\n','\\t'];
	var escapes = ['&amp;', '&lt;', '&gt;', '&quot;','<br>','&nbsp;&nbsp;&nbsp;&nbsp;'];
	var btnText = 'ソースを表示';
	
	$('.codeBtn').text(btnText);

	$('.code').click(function() {
		var clickElm = $('.code').index(this);

		if(!$(this).hasClass('codeOn')){
			var converted = $(this).html();
			for(var i=0; i<targets.length; i++){
				converted = converted.replace(new RegExp(targets[i], 'g'), escapes[i]);
			}
			$(this).toggleClass('codeOn');
			$(this).html(converted);
			btnText = '戻す';
		}else{
			$(this).html(origin[clickElm]);
			$(this).toggleClass('codeOn');
			btnText = 'ソースを表示';
		}
		$(this).next().text(btnText);
	});
	$('.codeBtn').click(function() {
		var clickElm = $('.codeBtn').index(this);

		if(!$(this).prev().hasClass('codeOn')){
			var converted = $(this).prev().html();
			for(var i=0; i<targets.length; i++){
				converted = converted.replace(new RegExp(targets[i], 'g'), escapes[i]);
			}
			$(this).prev().toggleClass('codeOn');
			$(this).prev().html(converted);
			btnText = '戻す';
		}else{
			$(this).prev().html(origin[clickElm]);
			$(this).prev().toggleClass('codeOn');
			btnText = 'ソースを表示';
		}
		$(this).text(btnText);
	});
});