PUBLOG

“Zobrazit zdrojový kód výběru” (View Selection Source) — jednoduchý bookmarklet (favelet) nebo uživatelský JavaScript, který umožní zobrazení zdrojového kódu libovolné části HTML nebo XML stránky. Velmi užitečné zejména při tvorbě webu.

Zkuste si to!

Stačí označit nějaký text na této stránce, vybrat barevné schéma (nebo ponechat výchozí “Mozilla”) a kliknout na tlačitko níže:

View Selection Source!

Tři způsoby instalace

1. User JavaScript (Uživatelský JavaScript)

Nejkomplikovanější instalace, ale nejkomfortnější používání s možností přizpůsobení.

Krok 1: Povolení uživatelských scriptů v Opeře

Pro povolení použijte Nástroje > Nastavení > Pokročilé > Obsah > JavaScript options. Zde vyberte adresář, kde chcete mít uloženy scripty. Opera pak bude nahrávat všechny soubory s příponou .js jako uživatelské JavaScripty.

Krok 2. Instalace “View Selection Source”

Stáhněte si “View Selection Source”User JS soubor. Uložte ho do adresáře, který jste zvolili v předchozím kroku. (Jeho umístění se můžete dozvědět též na interní stránce prohlížeče opera:about.

Krok 3: Přidání položky “Zobrazit zdrojový kód výběru” do kontextového menu Opery

Je potřeba lokalizovat soubor s nastavení menu. Běžte do Nástroje > Nastavení > Pokročilé > Nástrojové lišty. Pokud zde v boxu Nastavení menu vidíte pouze položku Opera Standard, tak jí označte a klikněte na tlačítko Duplikovat.

Jděte na stránku opera:about a nalezněte Opera directory. Jděte do podadresáře menu a otevřete soubor s příponou .ini ve své oblíbeném textovém editoru (např. Poznámkový blok, Vim, Textmate, jEdit, apod.). Před úpravami Operu vypněte.
V souboru vyhledejte sekci Hotclick Popup Menu. Na konec této sekce přidejte:

Item, "View selection source"="Go to page, "javascript:opera.getSelectionSource()""

Po úpravě by tato sekce měla vypadat nějak takto:

[Hotclick Popup Menu]
Item, 50872         = Copy
Item, 67652         = Copy to note
Platform Win2000-Unix-Mac, Feature Voice, Item, 70494 = Speak selection
--------------------1
Item, 65184             = Hotclick search, 200
;Submenu, 291920, Search with menu
Submenu, 291920, Internal Search With
Item, 65187         = Hotclick search, 50
Item, 65188         = Hotclick search, 51
--------------------2
Submenu, 291960, Translate menu
;Item, 65186        = Hotclick search, 52
--------------------3
Item, 67394             = Go to page, "%t"
Item, 65218         = Send text in mail
--------------------4
Item, "View selection source"="Go to page, "javascript:opera.getSelectionSource()""

A výsledek:

2. Favelet v konfiguračním souboru pro menu

Toto je velmi podobné předchozí variatně, ale není potřeba soubor s uživatelským JavaScriptem, celý kód se přidá do definice menu. Prosím následujte kroky 1 a 3 z předchozí varianty instalace. Ve třetím kroku vložte do menu místo kódu z předchozí varianty kód z tohoto souboru.

3. Klasický bookmarklet

Nejjednodušší způsob instalace. Vytvořte novou položku v “Oblíbených” a do políčka pro adresu vložte kód z tohoto souboru.

Přizpůsobení

Pokud jste zvolili instalaci jako uživatelský JavaScript, tak si můžete zvolit jedno ze tří připravený barevných schémat zvýrazňování syntaxe, případně si napsat schéma vlastní. Např. definice výchozího schéma “Mozilla” vypadá takto:

schemes.mozilla = {
    background:     'White',
    fontFamily:     'monospace',
    fontSize:           '12px',
    stringColor:        'Black',
    bracketColor:       'Black',
    tagNameColor:       'Purple',
    tagNameBold:        'bold',
    attrNameColor:      'Black',
    attrNameBold:       'bold',
    attrValueColor: 'Blue',
    attrValueBold:      'normal',
    quoteColor:     'Blue',
    quoteBold:      'bold',
    commentColor:       'Green',
    commentBold:        'normal',
    cdataMarkColor: '#ff6600',
    cdataMarkBold: 'bold',
    cdataContentColor: '#ff6600',
    cdataContentBold: 'normal'
}

Další nastavení lze provést prostřednictví proměnné conf, ve zdrojovém kódu scriptu, výchozí hodnoty jsou tyto:

var conf = {
 
    // window settings
    wWidth:            700, // window width
    wHeight:           300, // window height
    wTop:              100, // window position Y
    wLeft:              50, // window position X
    closeOnKeystroke: true,
    closeKeyCode:       27, // ESC
    toggleWrapKeyCode: 13, // ENTER
 
    // syntax highligthing settings
    scheme: schemes.desert // set to the your prefered color scheme
 
}

Licence

Tento program je volný software; můžete jej šířit a modifikovat podle ustanovení Obecné veřejné licence GNU, vydávané Free Software Foundation; a to buď verze 2 této licence anebo (podle vašeho uvážení) kterékoli pozdější verze.

Tags: html, opera, userjs, webdev

This entry was posted on Friday, December 5th, 2008 at 16.02 and is filed under Česky. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.