| Google-code-prettifyに関する記述を追加 |
| headタグにGoogle-code-prettifyに関する追加をすることでprettifyによるプログラムを整形できます。 |
| headタグにprettifyを宣言する方法 | ||
| headタグには下記の宣言をします。 | ||
| スクリプトとスタイルシートを読み込む準備をします。 | ||
1. スクリプト <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>(1)Internetから読み込むケース (2)ローカルから読み込むケース ダウンロードをしたファイルをローカルに保存した場所を指定して読み込ませます。<script src="run_prettify.js"></script> 2. CSS <link rel="stylesheet" type="text/css" href="prettify.css">
3. CSSで1行ずつ行番号を表示 <style>.prettyprint ol.linenums > li { list-style-type: decimal; } </style> |
| プログラムの表示 |
| プログラムの表示するには<pre>タグで囲います。 (javascriptの例) function test() { let num1 = 3; let num2 = 7; let total = num1 + num2; console.log(total); } 上記のプログラムを<pre>タグで囲む場合は、下記のようにします。 <pre class="prettyprint linenums;lang-js";> function test(){ let num1 = 3; let num2 = 7; let total = num1 + num2; console.log(total); } </pre> |
| 言語の指定 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| スクロールバーの表示 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| スクロールバーの表示をする場合は下記の設定をします。 高さを指定しないとスクロールバーは表示されません。 (例) style="overflow: auto; word-wrap: normal;height:50px;" (1)CSSスタイルにするケース style="overflow: auto; word-wrap: normal;" (2)headタグに設定するケース<style> pre.prettyprint { overflow: auto; word-wrap: normal; } </style> [サンプル]
let result=0;
result=random(10);
console.log(result);
function random(num)
{
return Math.floor(Math.random() * num);
}
|
| Add a description about Google-code-prettify |
| format programs using prettify by adding a description about Google-code-prettify to the head tag. |
| How to declare prettify in the head tag | ||
| The head tag declares the following: | ||
| Prepare to load scripts and stylesheets. | ||
1. Scripts <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>(1) When loading from the Internet (2) Reading from local Specify the location where you saved the downloaded file locally and load it. <script src="run_prettify.js"></script> 2. CSS <link rel="stylesheet" type="text/css" href="prettify.css">
3. Display line numbers for each line using CSS <style>.prettyprint ol.linenums > li { list-style-type: decimal; } </style> |
| View Program |
| To display a program, enclose it in the <pre> tag. (javascript example) function test() { let num1 = 3; let num2 = 7; let total = num1 + num2; console.log(total); } If you want to enclose the above program in tags, do it like this: |
| Specifying the language | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Display scrollbar | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| To display scroll bars, use the following settings. if do not specify a height, the scrollbar will not be displayed. ex.) style="overflow: auto; word-wrap: normal;height:50px;" (1) CSS style style="overflow: auto; word-wrap: normal;" (2) Set in the head tag<style> pre.prettyprint { overflow: auto; word-wrap: normal; } </style> [Sample]
let result=0;
result=random(10);
console.log(result);
function random(num)
{
return Math.floor(Math.random() * num);
}
|
| ホームページおよプリ等に掲載されている情報等については、いかなる保障もいたしません。 ホームページおよびアプリ等を通じて入手したいかなる情報も複製、販売、出版または使用させたり、 または公開したりすることはできません。 当方は、ホームペーよびアプリ利用したいかなる理由によっての障害等が発生しても、 その結果ホームページおよびアプリ等を利用された本人または他の第三者が被った損害について 一切の責任を負わないものとします。 |