Example HTML

Here you see an Example of a tttool-YAML for the syntax-highlighter prism.

Usually Yaml-Code looks like this:

comment: This is a Testyaml, only to test Colors, not to build a gme-File
init: $mode:=0 
scripts:

  ERSTENS:
  - $modus==0? P(kein_modus)
  - $modus==1? P(blob) P(modus_1)
  - $modus==2? P(blob) P(modus_2)
  - $modus!=0? $modus!=1? $modus!=2? P(ooops)

With this Highlighter the tttool-Things look like this:

# Projektbezeichnung
# Version

media-path: media/sounds_%s
language: de
welcome: willkommen
product-id: 42
comment: This is a Testyaml, only to test Colors, not to build a gme-File
init: $mode:=0 
scripts:

  ERSTENS:
  - $modus==0? P(kein_modus)
  - $modus==1? P(blob) P(modus_1)
  - $modus==2? P(blob) P(modus_2)
  - $modus!=0? $modus!=1? $modus!=2? P(ooops)

  ZWEITENS:
  - $modus==0? P(blob)
  - $modus==1? PA*(blob, soundfile)
  
  DRITTENS:
  - $modus==0? P(blob) 
  - $modus==0? P(blob,blob,blob) 
  - $modus==0? P(blob, blob, blob) 
  - $modus==1? P*(sound2, sound3)
  - $modus==1? P*(sound2,sound3)
  - $modus==2? PA*(sound2, sound3)
  - $modus==2? PA*(sound2,sound3)
  - $modus==3? PA(sound2-sound3)
  - $modus==4? G(game1)
  - $modus==5? J(ERSTENS)
  - $modus==6? C(game1)
  - $modus==7? T($register,123)
  - $modus==7? ?($a,65535) (00 FF)
  - $1==0? P(blob) 
  - $2==0? P(blob) 
  
  10204:
    - ?($register,1024) (00 FF)
  10205:
    - ?($register,2048) (00 FF)
  10206:
    - ?($register,65535) (00 FF)
  10207:
    - ?($a,65535) (00 FF) P(blob) ?($register,65535) (00 FF) $register-=$a
  10208:
    - $mod==11? ?($a,65535) (00 FF) P(blob) $mod:=0 J(10208)
    - $mod==0? $mod:=11 ?($register,65535) (00 FF) $register-=$a
  10239:
    - $register==0? $mod==11? P(english_0) $mod:=11
    - $register>0? $mod==11? $mod:=$register $mod%=10 $register/=10 J(10239)
    - $mod==0? P(english_0) $mod:=11 J(10239)
    - $mod==1? P(english_1) $mod:=11 J(10239)
    - $mod==2? P(english_2) $mod:=11 J(10239)
    - $mod==3? P(english_3) $mod:=11 J(10239)
    - $mod==4? P(english_4) $mod:=11 J(10239)
    - $mod==5? P(english_5) $mod:=11 J(10239)
    - $mod==6? P(english_6) $mod:=11 J(10239)
    - $mod==7? P(english_7) $mod:=11 J(10239)
    - $mod==8? P(english_8) $mod:=11 J(10239)
    - $mod==9? P(english_9) $mod:=11 J(10239)
    

Instructions

Step 1: Get Prism

Download prism.js and prism.css here: http://prismjs.com/download.html. There you can choose all the languages you like to show on your Website.

Step 2: Your HTML

Integrate the four files in your HTML like this:

<!DOCTYPE html>
<html>
<head>
	...
	<link href="prism.css" rel="stylesheet" />
	<link href="prism-yamltttool.css" rel="stylesheet" /> 
</head>
<body>
	...
	<script src="prism.js"></script>
	<script src="prism-yamltttool.js">
</body>
</html> 

Step 3: Place your Yaml-Code

Wrap your Yaml-Code with <pre> and <code class="language-yamltttool"> Tags.

<!DOCTYPE html>
<html>
<head>
	...
	<link href="prism.css" rel="stylesheet" />
	<link href="prism-yamltttool.css" rel="stylesheet" /> 
</head>
<body>

<pre><code class="language-yamltttool">
media-path: media/sounds_%s
language: de
welcome: willkommen
product-id: 42
comment: This is a Testyaml, only to test Colors, not to build a gme-File
init: $mode:=0 
scripts:

  ERSTENS:
  - $modus==0? P(kein_modus)
  - $modus==1? P(blob) P(modus_1)
  - $modus==2? P(blob) P(modus_2)
  - $modus!=0? $modus!=1? $modus!=2? P(ooops)
</code></pre> 
  
	<script src="prism.js"></script>
	<script src="prism-yamltttool.js">
</body>
</html> 

Thats all.

Visit the prism-site for more information about Highlighting.