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á.
Tartalomjegyzék
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
É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.
É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 :(
É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
ü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? :) )
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!
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?
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)
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
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
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
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 :)
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.
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é :?.
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)
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 :(.
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.
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.
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
Kiváló :). Most már teljes megelégedéssel tudom használni a programot :).
A PSPad-ban sokkal fejlettebb a snippet funkció.
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?
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.
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
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!