Szintaxis kiemelő weboldalunkra

CodeMirror szintaxis kiemelő

Találkoztatok már olyan weboldalakkal, ahol egy szöveges mezőben meg lehetett adni CSS vagy esetleg HTML kódot, amivel a saját oldaladat formázhattad be? Esetleg olyan honlaprendszert szeretnél építeni, amiben az ügyfeleknek lehetőséget szeretnél adni, hogy bizonyos dolgokat beformázzon egyedi CSS kódok segítségével? A megoldás megszületett!

Nemrég arra kerestem megoldást, hogy egy textarea mezőbe megadott CSS kódot, hogyan tudnék betördelni, tagolni, illetve a szabályokat és tulajdonságokat, hogyan tudnám színekkel kiemelni.

Találtam egy javascript kiegészítőt, amivel mindezt megoldhatom és ettől sokkal többet is tud. A neve CodeMirror és nagyon egyszerűen konfigurálható. Több mint 50 nyelvet ismer, köztük C, C#, Javascript, PHP, HTML, CSS, MySQL, Java, Ruby és még sok más ismert nyelv szintaktikáját beállíthatjuk alapértelmezettnek.

Jelenlegi legújabb verziója a 2.35 -ös verzió, de mikor még rátaláltam csak a 2.34 -es volt letölthető. Ez tetszett benne, hogy ilyen gyorsan fejlesztik és már a 3.0 -ás verzió bétáját is tesztelik, ez mindenképp biztató, ha arra gondolok, hogy van támogatás hozzá.

Még egy érv amellett, hogy gyorsan fejlődik és megbízható, hogy több multi vállalkozás is használja már, úgy mint a WordPress és a Joomla is kiegészíthető CodeMirror pluginnel, de láttam már a legújabb PhpMyadmin felületén is. Ezeken kívül a 2012-es Webkonferencián is találkoztam vele az Óbudai Egyetemen.

A következő oldalon kipróbálhatjátok: CodeMirror CSS formatter

És akkor nézzük meg, hogyan tudjuk beállítani. Első lépésként, ha letöltöttük a csomagot, akkor töltsük be az oldalunkba:

<script type="text/javascript" src="lib/codemirror.js"></script>
<link href="../lib/codemirror.css" rel="stylesheet" />

Ezenkívül attól függően, hogy milyen nyelvet szeretnénk használni, a mode mappából a megfelelő js fájlt is be kell tölteni:

<script type="text/javascript" src="css.js"></script>

Végezetül csináljunk egy editor példányt a textarea azonosítójával:

<script type="text/javascript">
// < ![CDATA[
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "text/css"
});
// ]]>
</script>

Miért ajánlom mindenkinek?

  • Gyors
  • Minden böngészőben megfelelően működik (IE7 től)
  • Naprakész és folyamatosan fejlődik
  • A legnépszerűbb nyelveket ismeri
  • Van hozzá Autoformatter, amellyel egy formázatlan kódot olvasható formára hoz
  • Beállítható a bekezdések mérete, automatikus bekezdés beállítások
  • Megjeleníthető a sorok száma
  • Összetartozó zárójelek kiemelése
  • Léteznek hozzá editor témák, de saját is létrehozható

Ha valakinek felkeltettem az érdeklődését mindenképp próbálja ki, nagyon hasznos eszköz. Aki esetleg elakadt a használatban írjon hozzászólást.

2 comments to Szintaxis kiemelő weboldalunkra

  • cheap nike shoes  írta:

    Thanks for the good writeup. It in reality used to be a enjoyment account it. Look advanced to more brought agreeable from you! However, how could we be in contact?

  • Szegedi István  írta:

    Hi Cheap! I can’t open your website. Please write me back. My contacts are in Kapcsolat menu.

Szólj hozzá!

A következő html tagek használata engedélyezett: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>