Web Design Leaves

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>

<pre class="prettyprint">
//コードを記述
</pre>

<pre class="prettyprint">$(window).on('load', function() {
  $(".page-loader").delay(500).fadeOut(600);
});

setTimeout('stoploading()', 10000);
function stoploading() {
  $(".page-loader").fadeOut('fast');
}</pre>

<pre class="prettyprint linenums">
 <!-- ソースコードを記述 -->
</pre>

.prettyprint ol.linenums > li {
  list-style-type: decimal;
  /* または */
  list-style-type: decimal-leading-zero;
}

<pre class="prettyprint linenums:30">
 <!-- ソースコードを記述 -->
</pre>

/* lang-css クラスを <pre> 要素に追加する例 */
<pre class="prettyprint lang-css">.map_wrapper {
  position: relative;
  width:100%;
  padding-top:56.25%;
  border: 1px solid #CCC;
}</pre>

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sunburst&callback=testing"></script>
<script>
  //コールバック関数の定義
  window.exports = {
    testing: function () {
      alert('hello');
    }
  }
</script>

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sunburst&callback=testing&callback=testing2"></script>
<script>
  //コールバック関数を複数定義
  window.exports = [];
  window.exports["testing"] = function() {
    alert("This is callback #1");
  }
  window.exports["testing2"] = function() {
    alert("This is callback #2");
  }
</script>

<!-- ダウンロードした run_prettify.js を読み込み callback=xxxx を指定 -->
<script src="../../prettify/run_prettify.js?callback=testing"></script>
<script>
  window.exports = {
    testing: function () {
      alert('hello');
    }
  }
</script>

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sunburst"></script>

<link rel="stylesheet" href="prettify/skins/sunburst.css"><!-- Desert の CSS -->

.prettyprint ol{
 padding: .2rem 0 .5rem .8rem; /* 間隔の調整（必要であれば） */
}

.prettyprint ol.linenums > li {
  list-style-type: decimal; /* 1行ごとに行番号を表示 */
  border-left:solid 1px #EBB15E; /* 区切り線を表示  */
  padding-left:0.5rem; /* 間隔の調整（必要であれば） */
}

.prettyprint ol{
  white-space: pre-wrap; /* 折り返し  */
}

pre.prettyprint {
  font-family: Monaco, Menlo, Consolas, 'Courier New', Courier, monospace, sans-serif;
} 

pre.prettyprint {
  font-family: Monaco, Menlo, Consolas, 'Courier New', Courier, monospace, sans-serif;
  background-color: #0E101E;   /* 背景色 */
  border-top-left-radius: 0;  /* テーマの角丸の設定を上書き */
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.prettyprint ol{
  margin: 0 1rem; /* 間隔の調整 */
  white-space: pre-wrap;  /* 折り返し */
}

.prettyprint ol.linenums > li {
  list-style-type: decimal;  /* 行番号を1行ずつ表示 */
  border-left:solid 1px #EBB15E;  /* 行番号との区切り線 */
  padding-left:0.8em; /* 間隔の調整 */
  color: #999; /* 行番号の色 */
}

function add_my_styles_and_scripts() {

  ・・・その他のスクリプトやスタイルの読み込み・・・

  //オートローダーを使う例
  wp_enqueue_script(
    'prettify',
    '//cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js',
    array(),
    '28.04.2015', //バージョン（オプション）
    true
  );
}
add_action( 'wp_enqueue_scripts', 'add_my_styles_and_scripts' );

global $post;
if ( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'code') ) {
  wp_enqueue_script(
    'prettify',
    '//cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js',
    array(),
    '28.04.2015',
    true
  );
}

window.addEventListener("load", function() {
  PR.prettyPrint();
});

function add_my_styles_and_scripts() {

  ・・・その他のスクリプトやスタイルの読み込み・・・

  //スタイルシート style.css の読み込み
  wp_enqueue_style(
    'my-template-style',
    get_stylesheet_uri(),
    //prettify sunburst を依存関係に
    array('prettify-sunburst-style'),
    filemtime( get_theme_file_path( '/style.css' ) )
  );

  //スタイルシート prettify sunburst.css の読み込み
  wp_enqueue_style(
    'prettify-sunburst-style',
    get_theme_file_uri('/sunburst.css'),
    array(),
    filemtime( get_theme_file_path( '/sunburst.css' ) )
  );

  //独自の JavaScript base.js の読み込み（★ prettify の初期化処理を記述）
  wp_enqueue_script(
    'base-script',
    get_theme_file_uri( '/js/base.js' ),
    array( 'jquery', 'bootstrap' ),
    filemtime( get_theme_file_path( '/js/base.js' ) ),
    true
  );

  //JavaScript prettify.j の読み込み
  wp_enqueue_script(
    'prettify',
    get_theme_file_uri( '/js/prettify.js' ),
    array(),
    '28.04.2015',
    true
  );
}
add_action( 'wp_enqueue_scripts', 'add_my_styles_and_scripts' );

function run_shortcode_code( $content ) {
  global $shortcode_tags;
  $original_shortcode_tags = $shortcode_tags;
  remove_all_shortcodes();
  add_shortcode( 'code', 'shortcode_code' );
  $content = do_shortcode( $content );
  $shortcode_tags = $original_shortcode_tags;
  return $content;
}
add_filter( 'the_content', 'run_shortcode_code', 7 );

function shortcode_code( $atts, $content = null ) {
  extract(shortcode_atts(array(
    'class' => 'prettyprint',
    'linenums' => '1', // 開始行番号の指定
    'lang' => '', // 言語ハンドラーの指定
    'esc' => 'true'  //自前でエスケープする場合は 0 を指定
  ), $atts));

  if($linenums ==='1') {
    $class = 'prettyprint linenums';
  } elseif ($linenums){
    $class = 'prettyprint linenums:' . $linenums;
  }else {
    $class = 'prettyprint';
  }

  if($lang) {
    $class .= ' lang-'. $lang;
  }

  if($esc){ //$content をエスケープ処理（'true'は文字列だが true になる）
    $content = htmlspecialchars($content, ENT_QUOTES, get_option('blog_charset'));
  }else{
    $content = esc_html($content);
  }

  return sprintf(
  '<pre class="%s"><code>%s</code></pre>'. "\n",
  esc_attr($class),
  $content
  );
}
//has_shortcode() で code-prettify を読み込んでいる場合は以下のコメントを外す
/*global $shortcode_tags;
$shortcode_tags[ 'code' ] = '__return_false';*/

if ( x > 50 && y < -50 )
//開始タグ < が終了タグ > と対になっていない場合は正常に機能しない 

if ( y < -50 && x > 50 ) 

[code esc=0]if(x > 50 && y < -50) [/code] 

[code]if ( x > 50 && y < -50 )
<!-- comment only -->[/code]

[code]if ( x > 50 && y < -50 )
###-->終了###[/code]