SyntaxHighlighter のカスタマイズ

SyntaxHighlighter をカスタマイズして、Small Basic のプログラムを表示できるようにしました。

実行結果

' Sample Small Basic Program

GraphicsWindow.Width = 598
GraphicsWindow.Height = 428
x1 = 100
y1 = 100
size = 100
x2 = x1 + size
y2 = y1 + size
GraphicsWindow.BrushColor = "Blue"
GraphicsWindow.FillRectangle(x1, y1, size, size)
GraphicsWindow.MouseDown = OnMouseDown
While "True"
  If mouseDown Then
    If x1 <= mx And mx <= x2 And y1 <= my And my <= y2 Then
      Sound.PlayBellRing()
    EndIf
    mouseDown = "False"
  Else
    Program.Delay(200)
  EndIf
EndWhile

Sub OnMouseDown 
  mouseDown = "True"
  mx = GraphicsWindow.MouseX
  my = GraphicsWindow.MouseY
  GraphicsWindow.Title = mx + "," + my
EndSub

ソース

expand source と表示されている場合はその文字をクリックするとソースが展開表示されます。 展開したソースを元に戻すにはブラウザーの再読み込みボタンを押してください。

shsb.html

今回作成したテーマとブラシを指定している部分です。 
<link type="text/css" rel="stylesheet" href="css/javascript.css">
<link type="text/css" rel="stylesheet" href="css/shCore.css">
<link type="text/css" rel="stylesheet" href="css/shThemeSb.css">
<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>
<script type="text/javascript" src="js/shBrushSb.js"></script>
<script type="text/javascript" src="js/shBrushXml.js"></script>
<script type="text/javascript" src="js/shBrushCss.js"></script>
<script type="text/javascript">
	SyntaxHighlighter.all();
</script>
コードのフォント等をクラスとして指定している部分です。 
<style>
.code {
	font-family: Consolas "Courier New" !important;
	border: 1px solid lightgray;
	max-height: 300px
}
</style>
実際に Small Basic のコードを指定している部分です。 
<h2>実行結果</h2>
<pre class="brush:sb; class-name:'code'; collapse:true; highlight:[12,18,24,25,26,27,28,29]">
' Sample Small Basic Program

GraphicsWindow.Width = 598
GraphicsWindow.Height = 428
x1 = 100
y1 = 100
size = 100
x2 = x1 + size
y2 = y1 + size
GraphicsWindow.BrushColor = "Blue"
GraphicsWindow.FillRectangle(x1, y1, size, size)
GraphicsWindow.MouseDown = OnMouseDown
While "True"
  If mouseDown Then
    If x1 &lt;= mx And mx &lt;= x2 And y1 &lt;= my And my &lt;= y2 Then
      Sound.PlayBellRing()
    EndIf
    mouseDown = "False"
  Else
    Program.Delay(200)
  EndIf
EndWhile

Sub OnMouseDown 
  mouseDown = "True"
  mx = GraphicsWindow.MouseX
  my = GraphicsWindow.MouseY
  GraphicsWindow.Title = mx + "," + my
EndSub
</pre>

shThemeSb.css

今回作成したテーマです。 
/**
 * SyntaxHighlighter
 * http://alexgorbatchev.com/SyntaxHighlighter
 *
 * SyntaxHighlighter is donationware. If you are using it, please donate.
 * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
 *
 * @version
 * 3.0.83 (July 02 2010)
 * 
 * @copyright
 * Copyright (C) 2004-2010 Alex Gorbatchev.
 * Copyright (c) 2014 Nonki Takahashi.
 *
 * @license
 * Dual licensed under the MIT and GPL licenses.
 */
.syntaxhighlighter {
  background-color: #f8f8f8 !important;
}
.syntaxhighlighter .line.alt1 {
  background-color: #fcfcfc !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: #f8f8f8 !important;
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
  background-color: #d4e9fd !important;
}
.syntaxhighlighter .line.highlighted.number {
  color: #d4d0c8 !important;
}
.syntaxhighlighter table caption {
  color: #f8f8f8 !important;
}
.syntaxhighlighter .gutter {
  color: #5c5c5c !important;
}
.syntaxhighlighter .gutter .line {
  border-right: 3px solid #d4d0c8 !important;
}
.syntaxhighlighter .gutter .line.highlighted {
  background-color: #d4d0c8 !important;
  color: black !important;
}
.syntaxhighlighter.printing .line .content {
  border: none !important;
}
.syntaxhighlighter.collapsed {
  overflow: visible !important;
}
.syntaxhighlighter.collapsed .toolbar {
  color: black !important;
  background: #f8f8f8 !important;
  border: 1px solid #cccccc !important;
}
.syntaxhighlighter.collapsed .toolbar a {
  color: #999999 !important;
}
.syntaxhighlighter.collapsed .toolbar a:hover {
  color: black !important;
}
.syntaxhighlighter .toolbar {
  color: #a0a0a0 !important;
  background: #d4d0c8 !important;
  border: none !important;
}
.syntaxhighlighter .toolbar a {
  color: #a0a0a0 !important;
}
.syntaxhighlighter .toolbar a:hover {
  color: black !important;
}
.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
  color: #000000 !important;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
  color: #008020 !important;
  font-style: italic !important;
}
.syntaxhighlighter .string, .syntaxhighlighter .string a {
  color: #cc6633 !important;
}
.syntaxhighlighter .keyword {
  color: #7777ff !important;
}
.syntaxhighlighter .preprocessor {
  color: #802020 !important;
}
.syntaxhighlighter .variable {
  color: #000000 !important;
}
.syntaxhighlighter .value {
  color: #dd6633 !important;
}
.syntaxhighlighter .functions {
  color: #006060 !important;
}
.syntaxhighlighter .constants {
  color: #006060 !important;
}
.syntaxhighlighter .script {
  font-weight: bold !important;
  color: #9b703f !important;
  background-color: none !important;
}
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
  color: #800000 !important;
}
.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
  color: #cc6633 !important;
}
.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
  color: #802020 !important;
}

.syntaxhighlighter .keyword {
  font-weight: bold !important;
}
.syntaxhighlighter .xml .keyword {
  color: #9b703f !important;
  font-weight: normal !important;
}
.syntaxhighlighter .xml .color1, .syntaxhighlighter .xml .color1 a {
  color: #9b703f !important;
}
.syntaxhighlighter .xml .string {
  font-style: italic !important;
  color: #cc6633 !important;
}

shBrushSb.js

今回作成したブラシです。 
/**
 * SyntaxHighlighter
 * http://alexgorbatchev.com/SyntaxHighlighter
 *
 * SyntaxHighlighter is donationware. If you are using it, please donate.
 * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
 *
 * @version
 * 3.0.83 (July 02 2010)
 * 
 * @copyright
 * Copyright (C) 2004-2010 Alex Gorbatchev.
 * Copyright (C) 2017 Nonki Takahashi.
 *
 * @license
 * Dual licensed under the MIT and GPL licenses.
 */
;(function()
{
	// CommonJS
	typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null;

	function Brush()
	{
		var keywords =	'Else ElseIf EndFor EndIf EndSub EndWhile ' +
						'For Goto If Step Sub Then To While';

		var objects =	'Array Clock Control Desktop Dictionary ' +
						'File Flickr GraphicsWindow ImageList Math Mouse ' +
						'Network Program Shapes Sound Stack ' +
						'Text TextWindow Timer Turtle';

		this.regexList = [
			{ regex: /'.*$/gm,										css: 'comments' },		// one line comments
			{ regex: SyntaxHighlighter.regexLib.doubleQuotedString,	css: 'string' },		// strings
			{ regex: new RegExp(this.getKeywords(keywords), 'g'),	css: 'keyword' },		// sb keyword
			{ regex: /(\b\d+[\.]?\d*\b|\.\d+\b)/g,					css: 'value' },   		// sb number
			{ regex: /And|Or|\+|\-|\*|\/|&lt;|=|>|\(|\)|\.|\,/g,	css: 'color1' },		// sb operator
			{ regex: new RegExp(this.getKeywords(objects), 'g'),	css: 'constants' },		// sb object
			{ regex: /\.\b\w+\b/g,									css: 'preprocessor' }	// sb property,operation,event
			];

		this.forHtmlScript(SyntaxHighlighter.regexLib.aspScriptTags);
	};

	Brush.prototype	= new SyntaxHighlighter.Highlighter();
	Brush.aliases	= ['sb', 'smallbasic'];

	SyntaxHighlighter.brushes.Sb = Brush;

	// CommonJS
	typeof(exports) != 'undefined' ? exports.Brush = Brush : null;
})();
Powered by