Indsæt kode i en normal tekstwidget, og den fjerner formateringen, så der efterlades en ulæselig blok. Den Kildekode widget, en Pro widget i Master Addons til Elementor, løser, at: det viser din kode med korrekt syntaksfremhævning, linjenumre, et sprogtema og en kopi-knap, 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 Pro installeret med en aktiv licens, da Source Code er en Pro-widget. 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: sproget til at fremhæve, en af 75, så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 når den frie Mønstre forlængelse er slået til. 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.
- Kun brugerdefineret tema: baggrund, typografi, tekstfarve og linjenummerfarve. Brugerdefineret viser koden i én farve, uden at søgeord fremhæves.
The Button sektion styler kopiknappen: dens typografi, tekstfarve, baggrundsfarve, polstring, kant og radius. Der er ingen separate svævefarver.
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 #
Hvad er kildekode-widget i Master Addons?
Det er en Master Addons Pro widget til Elementor, der viser kode med syntaksfremhævning, linjenumre, et sprogtema og en kopi-til-udklipsholder-knap. Du indsætter et uddrag, vælger sprog og tema og indstiller kopieringsknappen, alt sammen fra Elementor-panelet, uden at der er behov for plugins eller kortkoder.
Hvilke programmeringssprog fremhæver den?
Du vælger et af 75 sprog i Code dropdown, herunder PHP, JavaScript, CSS, HTML, Python, SQL og YAML. Valget indstiller, hvordan syntaksfarverne anvendes, så uddraget læser, som det ville i en kodeeditor.
Kan læserne kopiere koden med et enkelt klik?
Ja. Slå Aktiver Kopiér knap til, og der vises en kopi-til-udklipsholder-knap på blokken. Du indstiller dens position, når den vises, og teksten før og efter en kopi, som f.eks. Kopiér kode og Kopieret, hvilket bekræfter, at klikket virkede.
Kan jeg vise linjenumre i kodeblokken?
Ja. Skiftet Aktiver linjenummer i fanen Indhold tilføjer tal ned i venstre side af blokken. De gør det nemt at referere til en bestemt linje i en vejledning, og du kan slå dem fra for at få et renere udseende.
Kan jeg ændre farvetemaet for koden?
Ja. Tema dropdown tilbyder Standard, Mørk, Funky, Okaidia, Twilight, Coy, Solariseret lys, I morgen, og Brugerdefineret. Vælg en til at matche en lys eller mørk side, eller brug Brugerdefineret til at indstille din egen baggrund og tekst farver i fanen Stil. Brugerdefineret viser kode i én farve, uden søgeord fremhævning.
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 sammenligning med Elementor Pro's kodefremhævningswidget, se Elementorkodeblokwidget 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.
