Intype editor


Aki követi a blogomat, már biztos találkozott – és remélem ki is próbálta – az Intype nevű texteditor programot, ami mostanában a nagy kedvencem honlapkészítés során.

Pár szót azért ejtenék róla azok kedvéért, akik most hallják először a nevet.

Az Intype egy jelenleg ingyenesen használható program, mely alpha állapotban leledzik, de ez senkit nem riasszon el. Jóideje használom nagy megelégedéssel, nincs vele gond. Elsősorban azoknak a webmestereknek ajánlanám, akik a forráskódok írásához nem használnak, nem igényelnek WYSIWYG programokat, megelégszenek egy nagyon gyors texteditorral is, mely a munkát különböző kis hasznos funkciókkal képes jelentősen meggyorsítani. A gyorsasága igazából akkor jön ki más szoftverekkel szemben, mikor a felhasználó tudja, hogy mit akar beírni.

Az Intype (talán ezt mondanom sem kellene) szépen színezi a kódot, nekem kimondottan tetszik a benne lévő syntax highlight. Aki nem híve a világos alapon megjelenő sötét betűknek, ők tudnak más theme-t választani az edit/preferences menüpont alatt. Ismeri az XHTML nyelven túl pl. a css, DOM, C, Java, Perl, php, Ruby, SQL, XML, Python, Rails stb… nyelveket is.

Ezen kívül túl sok extrát nem tud, nincsenek benne olyan funkciók, melyek pl. a pspad-ban megvannak (konvertálás, kódtisztítás, formázás stb..) Viszont tud olyat, hogy a CTRL gombot nyomva tartva a szövegben tetszőleges helyeken lehet kijelölni a kódot, nem kell hogy egybefüggő legyen. Az ALT gombot nyomva tartva pedig a kódban oszlopokat lehet kijelölni.

E 2 funkción túl pedig van egy nagyon hasznos tulajdonsága (ezért szeretem a programot): képes snippet-eket kezelni.

Ez annyit jelent, hogy egyrészt a program már telepítés után rendelkezik egy jó adag előre megírt kódmintával, de sajátokat is fel lehet venni. Ezek rövid nevét begépelve majd egy TAB-ot ütve a program kiegészíti a szöveget a teljes kódra, karaktersorozatra.
E kódrészleteket a program winxp esetében a “C:\Program Files\Intype\bundles\” útvonalon tartja, pl. az XHTML-re vonatkozóakat a “C:\Program Files\Intype\bundles\HTML.itBundle\snippets\” útvonalon, a CSS-re vonatkozó kódokat pedig a “C:\Program Files\Intype\bundles\CSS.itBundle\snippets\” -n.
E könyvtárakba kell majd a később mutatott kódokat is elmenteni a megadott fájlnéven.

A működéséhez többet ér minden szónál, ha megnézel egy vagy több videót:

Most pedig mutatnék pár új, vagy módosított kódot amolyan ötletként, hogy mikre lehet használni. Én általában ezzel a programmal írom a bejegyzéseket is, ezzel készült pl. ennek a lapnak sitebuildje és egyébként is napi szinten használom, amikor csak szükség van rá.

image.itSnippet

A blognál szúrok be legtöbbször képeket, így nekem az alapértelmezett útvonal, mely után már csak a kép nevét kell beírnom, ehhez van beállítva. De semmi akadálya nem lenne, hogy pl. csináljak külön a bloghoz egy imgblog tab trigger-rel ellátott snippet-t, egy imgtutorial tab trigger-rel ellátottat stb…

1
2
3
4
5
6
7
{
	title: 'Image'
	tab_trigger: 'img'
	scope: 'text.html'
	comment: 'The ALT attribute for this tag by default uses only the filename of the image.'
	content: '<img src="http://blog.harder.hu/privat/2007/12/${1:testing.jpg}"${2: alt="${3:${1/(?:^.*?\/?)([^\/]+)(?:\.([^\/]+)?(\?.*)?$)/$1/}}"} />$0'
}

more.itSnippet

A wordpress-ben használt laptöréshez a kód. Tudom, lusta vagyok, ezt nem lenne nehéz begépelni sem. :)

1
2
3
4
5
6
{
	title: 'wordpress more'
	tab_trigger: 'more'
	scope: 'text.html'
	content: '<!--more-->'
}

bbquote.itSnippet

Fórumokon használt UBB kód (idézet)

1
2
3
4
5
6
{
	title: 'BBquote'
	tab_trigger: 'bbquote'
	scope: 'text.html'
	content: '[quote]${SELECTED_TEXT}$1[/quote]$0'
}

bblink.itSnippet

Fórumokon használt UBB kód ez is (link)

1
2
3
4
5
6
{
	title: 'BBlink'
	tab_trigger: 'bblink'
	scope: 'text.html'
	content: '[url="http://"]$1[/url]$0'
}

default.itSnippet

Ezt a weboldalak alapértemezett kódjaként használom, hogy ne kelljen mindig keresgetnem a neten.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
	title: 'default xhtml 1.0 transitional document'
	tab_trigger: 'default'
	scope: 'text.html'
	content: '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>An XHTML 1.0 Transitional Minta Oldal</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="description" content="leiras" />
	<meta name="keywords" content="kulcs, szavak" />
	<script type="text/javascript" src="minta.js"></script>
	<script type="text/javascript"> </script>
	<link rel="shortcut icon" href="/misc/favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="minta.css" type="text/css" media="all" />
	<style type="text/css"></style>
</head>
<body>
 
${SELECTED_TEXT}$0
 
</body>
</html>'
}

preformatted_text.itSnippet

Ezt most vettem fel, a tutorial.hu-n megjelenő forráskódminták formázásához. Sajnálatos módon a Geshi Syntax Highlighter, ami a kódot is formázza a cikkben, pont emiatt a mintakódban lévő pre zárótag-t értelmezte, úgyhogy kénytelen voltam a 7. sorban szereplő / (perjel) elé és után egy space-t tenni. Ezt majd vedd ki, mielőtt magadhoz lemented!

1
2
3
4
5
6
7
8
{
	title: 'Preformatted Text'
	tab_trigger: 'pre'
	scope: 'text.html'
	content: '<pre${1: lang="${2:html4strict}"}${3: line="${4:1}"}>
${SELECTED_TEXT}$0
< / pre>'
}

CSS snippet

CSS reset

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
	title: 'initializalas'
	scope: 'source.css'
	tab_trigger: 'initializalas'
	content: '/* initializalas
-------------------------------------------------------------------------*/
/* alap beallitasok, margin-ok es padding-ok nullazasa */
html, body, form, input, select, fieldset {font-size: 11px; font-family: Tahoma, Verdana, Arial; color: #000000; }
body {background-color: #242424; }
/* heading es egyeb formazasok, melyek mas alapertelmezett margokkal birnak az egyes bongeszokben */
html, body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, li, dl, address {margin: 0px; padding: 0px; }
/* alapertelmezett betumeret ezeknel az elemeknel */
h1, h2, h3, h4, h5, h6, pre, code {font-size: 10px; }
ul, ol {list-style: none; }
/* a linkek kez alakot kapjanak mindenhol */
form label {cursor: pointer; }
address {font-style: normal; }
/* a linkek alapertelmezett alahuzasat szunteti meg */
:link,:visited { text-decoration: none;  }
/* linkelt kepek keretezesenek megszuntetese */
a img,:link img,:visited img {border: none; }
/* a bordert nullazzuk fieldset eseteben */
fieldset {border: none; }
/* float-olt elemek utan hasznalatos clear */
div.clear, span.clear {clear: both; font-size: 0px; }'
}

A használatuk egyszerű: megadtam egy nevet, melyen hozz létre egy új fájlt a fentebb már írt könyvtárakban, majd másold bele azt a tartalmat, melyet a név alatt látsz. Ha az Intype már fut, zárd be és indítsd újra, hogy beltöltse a módosított vagy új snippet-eket is.

Kapcsolódó linkek:

Intype – bejegyzés a blogomon
Intype hivatalos honlapja

További videók:

Simple HTML snippets in Intype 1.1
Intype Snippets Showcase

Kapcsolódó bejegyzések:
  • Az előző cikkben (Intype editor) volt már arról szó, hogy lehet az Intype-ban 1-1 plusz snippet-et felvenni, ami 1 tag begépelésére kiír egy megadott kódot. Ez n …

  • Valid XHTML transitional doctype, Valid XHTML transitional sablon Az alábbi kódot amolyan segítség leginkább magamnak, hogy ne kelljen mindig megírnom az alapok …

  • A CSS-ek elején szoktam ezt a kódot használni ahhoz, hogy minden böngésző alatt az egyébként másként megjelenített részeket azonos kinézetre formázzam.…

  • Régebben már írtam egy cikket Intype editor címmel itt a lapon erről a remek programról, azóta is aktívan használom minden gépen.Nemrég megjelent egy új verz …

  • Ha olyasmi formázást szeretnél, melyek általában könyvekben lehet látni (tartalomjegyzék), akkor az alábbi kódot használd:tartalomjegyzék mintaol …

A cikket beküldte: Harder (http://blog.harder.hu)

24 hozzászólás

  1. Zoly says:

    Én eddig megszállottan (:D) csak Dreamweaver-t használtam, de ha már ilyen dicsérően írtál az Intype-ról, kipróbáltam.
    A programról nemigen tudok negatív véleményt mondani. Tetszett, jól átlátható, gyors. Csak még szokatlan egy kicsit, ezért inkább maradok a jó öreg Dreamweaver-nél. De azért fenthagyom a gépen… Mert tetszik és majd ismerkedek vele.
    Kössz, hogy “bemutattad” ezt a programot.

  2. Tupacko says:

    Érdekes programnak tünik. Én személy szerint a Notepad 2-re esküszöm. Hiperszuper gyors, pici, nem igényel telepítést, nagyon jó syntax highlight, csoportos indentálás (vagyis egy egész szövegrészt tabbal nem törölsz, hanem odébb tolsz), stb. A snipettek hiányoznak :(

  3. CSiPet says:

    Én meg a notepad++ -ra esküdtem fel pár éve, de a belinkelt videó megfogott… Nincs gondom a gépelgetéssel, de néha télleg idegesítő tud lenni az elérési utak betűzgetése. A másik ami hiányzik a notepad-ból a függőleges kijelölés (legalábbis én nem tom hogy műkszik, komolyabban utánanézni meg lusta voltam), de úgy fest itt ez is jó! Asszem megzézem a progit! THX

  4. zaik says:

    üdv,
    nagyon helyes, és tényleg nagyon praktikus program, It’s all text firefoxf pluginnal kifejezetten kényelmessé tud tenni számtalan dolgot (blog, fórum bejegyzés), nagyon apró (alig 3mega) program, viszont egy apró hiányossága a nyomtatás hiánya. nekem a notepad++ban az tetszik a legjobban, hogy a forráskódokat nagyon szép formában ki tudom vele nyomtatni. (persze, ki az, aki manapság kinyomtat vmit, igaz? :) )

  5. CSiPet says:

    AZANNYA!!!
    Felraktam a progit, kicsit konfigoltam… 8betű beütésével kész egy komplett honlap (13 sor)! Na jó egy tök üres, de azért honlap! Engem meggyőzött… kicsit ugyan szokni kell, de ez a bundles cucc baromi jó. Kár hogy nem olyan szép a kódformázása, mint a notepad++ -é, de valaki majd csak megoldja!

  6. Harder says:

    Kicsit tényleg hozzá kell szokni, de hát melyik programhoz nem … :)

    CSiPet,
    mit értesz az alatt, hogy kódformázás? A színezésre gondolsz?

  7. CSiPet says:

    Igen arra gondoltam… Végül is a notepad-ba attól lett a kód baromira átlátható, hogy logikusan színezte az egyes részeket… Ez meg csak az attribútumokat húzza ki, a többi fekete (legalábbis nálam). De tény, hogy megszokható (emlékeztet a jegyzettömbös időre :P)

  8. Tupacko says:

    A Notepad2ben is müködik az ALT + kijelölés, és szerintem a Notepad++ban is, hiszen nagyon hasonló és egykorú programok. Talán ami jobb a ++ban, hogy vannak fülecskék, és nem a taskbaron van a sok nyitott ablak :)
    Érdekesség: “initializalas”. Miért nem inicializálás? :) A román nyelvben a ‘t’ valóban a magyar ‘c’, de neked, Harder, honnan jött a ‘t’-s “initializalas” ötlet? Angolból? :D

  9. Harder says:

    CSiPet,
    a program tud színezni, valószínűleg csak állítottad be, hogy milyen nyelvű a kód (ha fájlt nyitsz meg, pl. .html-t, akkor felismeri). A program alsó sorában ott a kis zöld kör “L” betűvel, kattints oda.

    Tupacko,
    valószínűleg az angolból. :D

  10. CSiPet says:

    Jah tom, hogy át kell állítani, különben nem is műkszik a tab-os beillesztés!
    Egyéként közben rájöttem, hogy szinez, csak nem annyit, mint a notepad… Végül is ez is átlátható, csak meg kell szokni! Emellett már átállítottam a .php .html .css meg minden webes formátumot ez nyisson meg, szal engem már megvett kilóra a progi! (Csak abban reménykedem, hogy amikor kijön a végleges verzió az is ingyenes lesz!) Thx a cikket Harder! :D

  11. lepke says:

    Hol tomátállítani a bill. kombinációkat?
    csak mert a “AltGr + F”-re előhozza a keresést :’D és így nem nagyon tok “[” -t írni :)

  12. Harder says:

    Teljesen jogos a kérdés, eddig nekem ez nem is tűnt fel. Viszont nem találtam én sem ilyen opciót, úgyhogy a válasz: passz.
    ALTGR-t nyomvatartva és az F-t 2x lenyomva már kiírja a [-t és lehet másolni, de persze ez elég suta és lassú megoldás.

  13. TrE says:

    A videóban hogyan van megcsinálva az, hogy beírod például a title -t, és az automatikusan átalakul taggé ?
    Én ugyan hiába nyomkodom a TAB-ot, nem akar átalakulni a title taggé :?.

  14. Harder says:

    A dokumentum típusa át van állítva XHTML-re? (lent, a program alsó sorában találod meg, alapban egy kis zöld kör közepén egy L betű van)

  15. TrE says:

    Köszi, hogy megemelítetted, mert nem volt átállítva :oops: . Egyébként az zavar a programban, hogy nem lehet távoli fájlt megnyitni vele. Komodo IDE tudott ilyet (File > Open > Remote File ha jól emlékszem), és a Dreamweaver CS3 is, de az Intypeben nem találok ilyet :(.

  16. Harder says:

    Ez egy alap editor, ilyen extra dolgokat nem tud. Ha mégis szeretnéd ezt használni távoli fájlok szerkesztéséhez, akkor ajánlom figyelmedbe a SmartFTP-t, amiben bármely fájltípushoz bármely programodat hozzá tudod társítani és a program képes mentéskor automatikusan feltölteni a fájlokat a szerverre. Kb ugyanazt éred el vele, mintha az editor-ban kapcsolódnál a szerverhez.

  17. TrE says:

    Smart FTP-t használok már egy jó ideje (1éve ?). De ezzel a módszerel az a gond, hogy a Smart FTP-vel egyszerre csak 1fájlt tudok szerkeszteni. És ha például valamiért percenként kell a másik fájlt szerkesztenem, akkor meg percenként kell megnyitnom a fájlokat, ami elég pepecselős dolog :S.

  18. Harder says:

    Ja értem. Akkor esetleg megoldás lehet, hogy ha egy FTP-t mint meghajtó veszel fel a rendszerbe, ahogy néztem, erre több megoldás is van: how to mount an ftp drive in windows

  19. TrE says:

    Kiváló :). Most már teljes megelégedéssel tudom használni a programot :).

  20. Kormoran says:

    A PSPad-ban sokkal fejlettebb a snippet funkció.

  21. Harder says:

    Mire gondolsz snippet alatt? Mivel ilyet a pspad súgója nem ismer, így feltételezem, valamelyik másik funkcióját hívod snippetnek. Vagy valami plusz kiegészítéssel lehet használni?

  22. Kormoran says:

    Harder:
    Igazad van, valóban nem snippetnek hívja.
    Ctrl+Space-szel hívható elő a funkció. Gyakorlatilag az adott nyelv összes függvénye elérhető, és a kijelölt sorokat a blokképző utasítások belsejébe helyezi. Erre mondtam, hogy fejlettebb.
    A PSPad-dal a sok funkciója ellenére az a bajom, hogy valahogy mégsem áll kézre…
    Inkább a Notepad++t vagy a SciTE-t használom.

  23. Harder says:

    Aki esetleg szokta használni más editorban is a reguláris kifejezéseket, nézze meg az Intype-ban lévő lehetőségeket:
    http://www.geocities.jp/kosako3/oniguruma/doc/RE.txt

  24. Galder says:

    Sziasztok!

    Régóta ilyen progit kerestem. Ehhez hasonló csak a ConTEXT nevű progi volt, amivel tudtam hasonló eredményt elérni. De az meg csomó más dologban nem tetszett, így maradt nekem is a Notepad2 és a Notepad++. Utóbbit kezdem hanyagolni, mert Notepad2-ben is benne van ami nagyon szükséges.
    Mostanában a Visual Studio Express-t használom HTML/CSS témákra. Arra nagyon ütős, másra már nem annyira. Persze azt telepíteni kell…
    Viszont megtetszett az Intype, várom a végleges verziót és köszönöm a tippet!

Szólj hozzá
a Intype editor c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>