Kildekode

Indsæt kode i en normal tekstwidget, og den fjerner formateringen, så der efterlades en ulæselig blok. Den Kildekode widget i Master Addons til Elementor retter det: det viser din kode med korrekt syntaksfremhævning, linjenumre, et sprogtema og en kopieringsknap, så læserne kan få fat i et uddrag med et klik.

Det er bygget til tutorials, dokumentation, og udvikler blogs, hvor som helst du har brug for at vise PHP, JavaScript, CSS, HTML, eller et andet sprog rent. Du indsætter koden, vælge et sprog og tema, og indstille kopi knappen, alle fra Elementor panel. Nedenfor er en køre gennem hver indstilling.

Hvad gør Source Code widget #

Widgetten tager en kodeblok og gengiver den med farvekodet syntaksfremhævning baseret på det sprog, du vælger. Den kan nummerere linjerne, anvende et af flere editortemaer og tilføje en kopi-til-udklipsholder-knap, der bekræfter, hvornår koden er blevet kopieret.

Den har tre faner: Indhold til koden, sproget og kopieringsknappen, Stil til beholder- og knaplooket og Avanceret til de sædvanlige Elementor-indstillinger.

Før du starter #

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor installeret og aktiv. Ny i plugin'et? Se den installationsvejledning.
• Det kodestykke, du vil have vist.

Sådan tilføjes kildekode-widgetten #

I Elementor-editoren skal du åbne Elementer panel og søg efter Kildekode, eller rul til afsnittet Mastertilføjelser. Træk det over på din side. Det indlæses med et eksempelstykke, så du kan se fremhævningen med det samme.

Tilføj din kode og vælg et sprog #

Åbn Content fane. Den Kildekode sektion holder alt. Indsæt dit uddrag i Kildekode boks, og sæt derefter sproget og temaet over det.

• Kode: det sprog, der skal fremhæves, som PHP, JavaScript, CSS eller HTML. Dette indstiller, hvordan farverne anvendes.
• Tema: farveskemaet for blokken (dækket nedenfor).
• Kildekode: selve uddraget, med en Write with AI-mulighed, hvis du har brug for et hurtigt eksempel.

Vælg et tema #

The Theme dropdown indstiller farveskemaet for kodeblokken. Det omfatter Default, Dark, Funky, Okaidia, Twilight, Coy, Solarized light, Tomorrow, og en Custom mulighed, så du kan matche blokken til en lys eller mørk side.

At skifte sprog og tema sammen giver hvert uddrag det rigtige udseende. Her er et JavaScript-uddrag om Dark-temaet.

Opsæt kopieringsknappen #

Kopieringsknappen er det, der gør widgetten nyttig til tutorials. Under kodeboksen er kontrollerne til den.

• Aktiver Kopiér knap: vis eller skjul knappen kopi-til-udklipsholder.
• Aktiver linjenummer: slå linjenumrene til venstre til eller fra.
• Knapsynlighed: vis knappen Altid eller kun på hover.
• Knapposition: placer den i et hjørne, som øverst til højre.
• Kopiér knaptekst og efter kopieret knaptekst: etiketten før og efter en kopi, såsom Kopiér kode og Kopieret.

Når en besøgende klikker på knappen, skifter etiketten til din Efter kopieret tekst for at bekræfte, at kopien fungerede.

Style kodeblokken #

The Style tab opdeles i Container og Button, plus Mønstre (en Pro-mulighed). Den Container sektion styrer kodeblokkens ramme.

• Højde: dæk blokhøjden og lad lang kode rulle.
• Polstring og Margin: afstand inde i og omkring blokken.
• Border Type og Border Radius: omridset og afrundede hjørner.

The Button sektion styler kopieringsknappen: dens farver, typografi, polstring og kant, i både normal- og svævetilstand.

Resultatet på siden #

Publicer eller forhåndsvisning og koden gengiver fremhævet, med linjenumre og en arbejdskopi knap. Nedenfor er et CSS-uddrag på Dark-temaet med knappen, der viser dens Kopierede tilstand.

Almindelige brugstilfælde #

• Tutorials og how-to indlæg deling af kodelæsere kan kopiere.
• Plugin og temadokumentation med config eller hook eksempler.
• Udviklerblogs viser uddrag i PHP, JavaScript eller CSS.
• Vidensgrundlag med copy-paste-kommandoer.
• Landingssider demonstration af et API-kald eller indlejringskode.

Tips til at arbejde med Source Code widget #

• Match sproget til koden. Den rigtige kodeindstilling er det, der gør fremhævningen nøjagtig.
• Vælg et tema, der passer til siden. Brug et mørkt tema på mørke sektioner og et lyst på hvide sider.
• Hold kopiknappen synlig. Indstil Knapsynlighed til Altid for tutorials, så læserne får øje på det.
• Cap højden for lange uddrag. En fast Højde med rulle holder en lang blok fra at overtage siden.
• Skriv tydelige knappeetiketter. Kopiér kode og Kopieret fortælle læserne præcis, hvad der skete.

Ofte stillede spørgsmål #

Indpakning #

Kildekode-widget'en forvandler et råt uddrag til en ren, fremhævet blok, som læserne kan kopiere med et enkelt klik. Indsæt din kode, indstil sproget og temaet, tænd linjenumre og kopieringsknappen, og stil derefter beholderen, så den passer til din side. For en anden måde at præsentere struktureret indhold på, se Dynamisk tabel-widget, gennemse hele Master Addons widgets og udvidelser, og kontrollere de prissætning side for hvad hver plan indeholder.