Scrapbox:コードブロック記法の使い方

特にScrapboxで使うもの

Javascript

code:js

// JavaScript

// Google検索に、+site:scrapbox.io をつけて、scrapbox.ioドメイン内の検索をする。

// 公開プロジェクトの検索に便利。

scrapbox.PopupMenu.addButton({

title: 'Gs',

onClick: text => window.open('https://www.google.com/search?q='

+ text.replace(/\|\/g,"")

+ ' site:scrapbox.io'

)

})

cf..iconUserScript -- コードブロック記法で書く

カスケーディングスタイルシート（CSS : cascading style sheets）

プログラミング言語だけではなく、CSSも書ける

code:css

/* CSS */

body {

/* 背景色 */

background-color: black;

/* 背景画像 */

background-image: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg);

}

cf..iconUserCSS -- コードブロック記法で書く

スケーラブルベクターグラフィックス（SVG : scalable vector graphics）

code:svg

xmlns:xlink="http://www.w3.org/1999/xlink"

viewBox="5 5 10 10" width="100" height="100">

</svg>

cf..iconScrapbox:SVG

プログラミング言語

Python

code:hello.py

print('Hello Scrapbox World. ハロー Colaboratory')

Colaboratory側で実行

$ !curl -s https://scrapbox.io/api/code/suto3/Colaboratory/hello.py | python

cf..iconColaboratory

cf..iconScrapbox:ページ上のスクリプトを実行する

C言語

code:hello.c

#include <stdio.h>

int main(void)

{

printf("Hello, Scrapbox world!\n");

return 0;

}

コンパイル

$ curl -s https://scrapbox.io/api/code/suto3/Scrapbox:%E3%83%9A%E3%83%BC%E3%82%B8%E4%B8%8A%E3%81%AEC%E8%A8%80%E8%AA%9E%E3%81%AE%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%92%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%99%E3%82%8B/hello.c | gcc -xc - -o hello

実行

$ ./hello

cf..iconScrapbox:ページ上のC言語のソースをコンパイルする

データ

データ記述言語も書ける

code:json

[

{

"Name" : "丹下左膳",

"Description" : "時代劇のヒーロー",

}

]

code:tsv

a 1 100

b 2 200

その他

普通のテキストファイルも作れますcf..iconScrapbox:preタグ相当のもの

code:memo.txt

このファイルはメモです。

[] カギ括弧使えます。

にゃーん

iniファイルも作れますcf..iconScrapbox:設定ファイルの共有

code:test.ini

section1

name=value

; comment text

section2

name=値

; これはコメントです

Markdown も書けますcf..iconScrapbox:Markdownの表示

code:markdown.md

H1見出し（イコール行を挿入。）

==================

1. 富士

1. 鷹

1. なすび

H2見出し（ハイフン行を挿入。）

---------------------------------

Scrapbox:コードブロック記法

Scrapbox-tips.icon

https://img.shields.io/badge/Scrapbox-コードブロック記法の使い方-06B632.svg?logo=Scrapbox&style=for-the-badge&logoColor=white