logo

Předvyplňte LocalPen kódem

Toto je část série:LocalPen - kódová pera, která běží lokálně!

LocalPen je výkonné frontendové kódovací hřiště, které běží zcela na klientovi a může být hostováno na jakémkoli statickém souborovém serveru. Vyzkoušejte to nyní na localpen.io

V tomto příspěvku popisujeme různé metody předvyplnění LocalPen kódem (import kódu do editorů). To může být skvělé pro dokumentaci a sdílení odkazů s kódem.

Import z adresy URL

Nejčastěji se kód importuje z adresy URL. Zdrojovou adresu URL můžete zadat v uživatelském rozhraní (tlačítko nastavení> Importovat) nebo přidáním adresy URL jako hash do adresy URL LocalPen:

(např. https://localpen.io/#https://gist.github.com/hatemhosny/a0a32216df59e53879b7cd83856cdde4)

LocalPen dokáže detekovat a automaticky načíst kód z více zdrojů. Aktuálně jsou podporované zdroje:

  • Github gists (importuje více souborů v gist)
  • Adresář v úložišti github (více souborů)
  • Soubor v úložišti github (importuje tento jeden soubor)
  • Úryvky Gitlab (importuje více souborů ve úryvku)
  • Adresář v gitlab repo (více souborů)
  • Soubor v gitlab repo (importuje tento jeden soubor)
  • Extrahujte bloky kódu z webové stránky (viz bloky kódu)
  • Jinak bude adresa URL považována za nezpracovaný soubor (jako nezpracované soubory na githubu)

Pokud zdrojová adresa URL odkazuje na více souborů (např. github gists a adresáře), LocalPen se pokusí uhodnout, který soubor načíst do kterého editoru kódu, například:

  • index.html -> označení
  • my-style.css -> styl
  • app.js -> skript

Lze použít všechny podporované jazyky. Pokud zdrojová adresa URL odkazuje na více souborů stejné kategorie, hádání nemusí fungovat dobře. V tomto případě možná budete muset zadat soubory k načtení a jazyk pro každý z nich jako parametry řetězce dotazu. Například:

https://localpen.io/?pug=page.pug&scss=styles.scss&ts=app.ts#https://github.com/myuser/myrepo/tree/master/mydir

LocalPen vyhledá adresář mydir v github repo myuser/myrepo a načtěte page.pug v editoru značek styles.scss v editoru stylů a app.ts v editoru skriptů. Ve výchozím nastavení se zobrazí první soubor v řetězci dotazu (page.pug v tomto případě).

Bookmarklet "Upravit v LocalPen"

Namísto ručního kopírování/vkládání adres URL k importu může být bookmarklet velmi pohodlný. Otevře LocalPen v novém okně a přidá adresu URL aktuální webové stránky jako hash. Vytvořte si v prohlížeči novou záložku a přidejte tento kód jako její URL:

javascript: (function () {
  window.open('https://localpen.io/#' + location.href, '_blank');
})();

Import z CodePen

V současné době rozhraní CodePen API neumožňuje přímý import kódu z per. Jakékoli uložené pero však můžete exportovat jako soubor Github a poté jej importovat do LocalPen. To je ještě jednodušší, pokud použijete bookmarklet. Formát, který Codepen exportuje do gists, je dobře srozumitelný pro LocalPen. Většinu per lze importovat s žádnými nebo minimálními změnami.

Toto je souhrnný přehled přesunu kódu mezi soubory LocalPen, CodePen a GitHub:

Pamatujte, že svůj kód můžete vždy exportovat z LocalPen jako nezpracované soubory zdrojového kódu, zkompilovaný/transpilovaný kód jako soubor HTML nebo jako konfigurační soubor JSON projektu.

Předvyplnění z bloků kódu

Editory lze předvyplnit bloky kódu na webových stránkách. Stránka je načtena, její kód HTML je analyzován a kód je extrahován z prvků se specifickými selektory CSS.

Důležitá poznámka: Aby to fungovalo, musí být na cílovém hostiteli povolen CORS, aby byly povoleny požadavky na načítání z LocalPen. Toto není vyžadováno, pokud je LocalPen hostován na stejném hostiteli cílové webové stránky.

Přidejte parametr querystring url bez hodnoty a vložte adresu URL stránky s bloky kódu jako hash. Například:

https://localpen.io/?url#https://hatemhosny.github.io/localpen-examples/prefill-from-code-blocks.html

Ve výchozím nastavení LocalPen hledá prvky, které odpovídají selektoru CSS .localpen [data-lang="${language}"] .

například v tomto bloku kódu:

<code class="localpen">
  <pre data-lang="html">
This is identified as &lt;strong&gt;HTML&lt;/strong&gt; code
</pre
  >
</code>

HTML editor má předvyplněno:This is identified as <strong>HTML</strong> code

Všimněte si, že kód by měl být zakódován (např. lomené závorky), aby nedocházelo k interferenci s HTML stránky.

Možná budete chtít zadat selektory CSS pro prvky, které obsahují kód pro konkrétní jazyky. Následující příklad načte obsah prvního prvku, který odpovídá selektoru CSS h3 jako HTML kód:

https://localpen.io/?url&html=h3#https://hatemhosny.github.io/localpen-examples/prefill-from-code-blocks.html

Vezměte prosím na vědomí, že můžete předvyplnit editory LocalPen vložené na stejné stránce. To funguje skvěle pro dokumentační weby.

Toto je ukázka automatické extrakce bloků kódu do předvyplnění editorů vytvořením odkazů „Upravit v LocalPen“. Také vložené editory jsou předvyplněny z bloků kódu. (Zobrazit zdroj)

Předvyplnění editorů podle parametrů řetězce dotazu

Editory můžete předvyplnit zápisem obsahu jako hodnoty parametru řetězce dotazu, např.:

https://localpen.io/?css=h1{color:blue;}&html=%3Ch1%3EAhoj%20World%3C/h1%3E

Tento odkaz předem načte editory CSS a HTML s obsahem a učiní CSS výchozím editorem. To může být výhodné pro sdílení odkazů s předinstalovaným obsahem bez použití externí služby. Při této metodě však buďte opatrní, protože rychle dosáhnete limitu ~2000 znaků délky adresy URL. Musíte také zakódovat obsah URI (což můžete provést v JavaScriptu pomocí encodeURI a encodeURIComponent metody).

Byl to dlouhý příspěvek, ale popisuje tak mocnou funkci v LocalPen.

V dalším příspěvku probereme vestavěné editory a režimy zobrazení.