スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

fc2ブログでプログラミングソースを綺麗に表示する。

ソースだけを表示。ソースコードを綺麗に見せる「SyntaxHighlighter」というのを導入した。


<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
  <title>formの値を取得してhtml上に追加する /javascript編</title>
  <script>
    function test(){
document.getElementById("hyouji").innerHTML=document.f1.t1.value;
      
    }
    
  </script>
  
</head>
<body>
  <form  name="f1">
  <input type="text" name="t1">
  <input type="button" onclick="test()" value="送信">
  </form>
  <br>
  <div id="hyouji">ここに表示</div>
</body>
</html>
■参考サイト
fc2ブログでソースコードを綺麗に表示する。(SyntaxHighLighter 3.0)
「Can’t find brush for:xxxx」とアラートが出る。 タグがエスケープされる?

■必要かもしれないツール(ソースコード変換)
ソースを「そのまま表示する為のHTMLソース」に変換
ソースコード変換
※2つともソースコード変換ツール探すと色々ある。

■その他 メモメモ
改行コード挿入ツール
※シンタックスを使うと自動改行の設定OFFにする必要があった。
その為の普段の改行<br>入れる必要があってめんどいのでツールを使うと楽かも

よく使う設定
<pre class="brush:html">  <!--HTMLソースを表示する-->
<pre class="brush:css">   <!--CSSソースを表示する-->
<pre class="brush:js">    <!--JavaScriptソースを表示する-->
<pre class="brush:html highlight:[2,4]">  <!--特定行をハイライト-->
<pre class="brush:js html-script:true">   <!--他言語とHTML-->
<pre class="brush:html first-line:25">    <!--開始行番号の変更-->
<pre class="brush:html toolbar:false">    <!--ツールバー非表示-->
<pre class="brush:html auto-links:false"> <!--オートリンク解除-->
<pre class="brush:html" title="タイトル">  <!--タイトル表示-->
関連記事

コメント


管理者のみに表示

トラックバック

ニューハーフ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。