Difference: LahdekoodinUpottaminen (r12 vs. r11)

r12 - 03 Nov 2011 - 13:07 - JaakkoSalonen r11 - 11 May 2010 - 13:07 - AdminUser

Lähdekoodin upottaminen

Lähdekoodin upottaminen

Lähdekoodin upottaminen wiki-sivulle on erityisen kätevää silloin, kun wikiä haluaa käyttää mm. esimerkkien tuomiseen wiki-sivulle. Lähdekoodin upotus pitää huolen siitä, että käytetty kieli korostetaan oikein sen syntaksin mukaan. Myös rivinumerointi tuotetaan automaattisesti siten, että koodin voi tarvittaessa helposti kopioida leikepöydän kautta eteenpäin. Lähdekoodin upottaminen on toteutettu DpSyntaxHighlighter-laajennuksen avulla.

Lähdekoodin upottaminen wiki-sivulle on erityisen kätevää silloin, kun wikiä haluaa käyttää mm. esimerkkien tuomiseen wiki-sivulle. Lähdekoodin upotus pitää huolen siitä, että käytetty kieli korostetaan oikein sen syntaksin mukaan. Myös rivinumerointi tuotetaan automaattisesti siten, että koodin voi tarvittaessa helposti kopioida leikepöydän kautta eteenpäin. Lähdekoodin upottaminen on toteutettu DpSyntaxHighlighter-laajennuksen avulla.

Lähdekoodi upotetaan wiki-sivulle seuraavalla syntaksilla:

Lähdekoodi upotetaan wiki-sivulle seuraavalla syntaksilla:

%CODE{lang="kieli"}%
...
%ENDCODE%
%CODE{lang="kieli"}%
...
%ENDCODE%

Vinkki: Lähdekoodin upottaminen kannattaa aina tehdä raaka muokkaus tai wiki text tilassa.

Vinkki: Lähdekoodin upottaminen kannattaa aina tehdä raaka muokkaus tai wiki text tilassa.

Esimerkki 1: JavaScript-lähdekoodin liittäminen

Esimerkki 1: JavaScript-lähdekoodin liittäminen

<sticky>
%CODE{lang="javascript"}%
function popup() {
  var item = document.getElementById('item');
  alert('Item=' + item);
  return false;
}
%ENDCODE%
</sticky>
<sticky>
%CODE{lang="javascript"}%
function popup() {
  var item = document.getElementById('item');
  alert('Item=' + item);
  return false;
}
%ENDCODE%
</sticky>
function popup() {
   var item = document.getElementById('item');
   alert('Item=' + item);
   return false;
} 
function popup() {
   var item = document.getElementById('item');
   alert('Item=' + item);
   return false;
} 

Vinkki: Ympäröi lähdekoodi <sticky>-tageilla. Muussa tapauksessa HTML-muokkaustilan käyttö rikkoo lähdekoodin rivinvaihdot!

Vinkki: Ympäröi lähdekoodi <sticky>-tageilla. Muussa tapauksessa HTML-muokkaustilan käyttö rikkoo lähdekoodin rivinvaihdot!

Esimerkki 2: HTML-merkkauksen liittäminen sivulle

Esimerkki 2: HTML-merkkauksen liittäminen sivulle

%CODE{lang="html"}%
html>
   <head>
      <title>Hei Maailma!</title>
   </head>
   <body>
      <h1>Hei Maailma!</h1>
   </body>
</html>
%ENDCODE%
%CODE{lang="html"}%
html>
   <head>
      <title>Hei Maailma!</title>
   </head>
   <body>
      <h1>Hei Maailma!</h1>
   </body>
</html>
%ENDCODE%
<html>
  <head>
    <title>Hei Maailma!</title>
  </head>
  <body>
    <h1>Hei Maailma!</h1>
  </body>
</html>
<html>
  <head>
    <title>Hei Maailma!</title>
  </head>
  <body>
    <h1>Hei Maailma!</h1>
  </body>
</html>

Vinkki: HTML:n upottaminen lähdekoodina voi toisinaan aiheuttaa sen, että wiki yrittää lähdekoodin sijaan näyttää itse HTML-merkkauksen. Jos näin käy, käytä HTML-lähdekoodissa pakomerkkejä. Erityisesti vasen kulmasulku ( >) merkitään > ja oikea kulmasulku ( <) merkitään <.

Vinkki: HTML:n upottaminen lähdekoodina voi toisinaan aiheuttaa sen, että wiki yrittää lähdekoodin sijaan näyttää itse HTML-merkkauksen. Jos näin käy, käytä HTML-lähdekoodissa pakomerkkejä. Erityisesti vasen kulmasulku ( >) merkitään > ja oikea kulmasulku ( <) merkitään <.

  

Esimerkki 3: XML-merkkauksen upottaminen

  

XML-merkkaus on erityistapaus, jonka upottaminen oletusasetuksilla voi aiheuttaa ongelmia http://foswiki.org/Extensions/DpSyntaxHighlighterPlugin#Pre_vs_Textarea. Tästä syystä XML-upotuksen kanssa on hyödyksi käyttää koodilohkoon merkkaukseen lisämäärettä el="textarea". Esimerkiksi:

  
%CODE{lang="xml" el="textarea"}%
<note>
    <to>Tove</to>
    <from>Jani</from>
    <heading>Reminder</heading>
    <body>Don't forget me this weekend!</body>
</note>
<note/>
%ENDCODE%
  

Näkyy upotettuna:

  
r12 - 03 Nov 2011 - 13:07 - JaakkoSalonen r11 - 11 May 2010 - 13:07 - AdminUser

View topic | View difference interwoven | History: r13 < r12 < r11 < r10 | More topic actions
 
Copyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TUTWiki? Send feedback