Elementorkodeblokwidget med syntaksfremhævning (Pro)
Source Code er en Master Addons Pro widget til at vise kodestykker på en Elementor side. Indsæt koden, vælg et af 75 sprog og et af otte Prism.js temaer, og blokken gengives med syntaksfarver, valgfri linjenumre og en kopi til udklipsholder knap. Besøgende kan læse og kopiere koden, men ikke redigere den. Det passer til tutorials, dokumentation, ændringslogs og udviklerporteføljer.
Sådan tilføjes en kodeblok i Elementor
Kildekode har brug for Elementor og en aktiv Master Addons Pro licens.
- Aktiver Master Addons Pro, rediger siden med Elementor og søg i widgetpanelet efter Kildekode.
- Træk den, hvor uddraget hører hjemme.
- Vælg sproget i Code og a Theme.
- Indsæt uddraget i Kildekode box.
- Tænd for kopiknappen og linjenumrene, og indstil knaptekst, synlighed og position.
- I fanen Stil skal du indstille en Højde for lange uddrag og skrive knappen, og derefter forhåndsvise siden og teste Kopier.
Hver indstilling er dækket af Kildekode widget indstillinger guide.
75 Sprog og 8 Prism.js Temaer
The Code dropdown lister 75 sprog, fra HTML, CSS, JavaScript og PHP til Python, Bash, SQL, JSON, YAML, TypeScript, React JSX, Go, Kotlin og Swift. Theme tilbyder Default, Mørk, Funky, Okaidia, Twilight, Coy, Solariseret lys og I morgen. Vælg Brugerdefineret sådan indstiller du din egen baggrund, tekstfarve, linjenummerfarve og typografi i fanen Stil.
- Brug et lyst tema som Standard eller Solariseret lys på hvide sider, og Okaidia eller Tomorrow på mørke sektioner.
- Brugerdefineret har ingen søgeordsfarver: koden vises i den enkelte tekstfarve, du vælger, så brug et forudindstillet tema, når du vil have syntaksfarver.
- En widget holder et uddrag. Placer flere widgets side om side for kode og output.
Elementor Pro Code Highlight vs Master Addons Kildekode
Elementor Pro har sin egen Code Highlight widget. Begge bruger Prism.js, så valget kommer ned til de ekstramateriale, du har brug for.
| Feature | Elementor Pro Code Highlight | Master Addons Kildekode |
|---|---|---|
| Price | Behov Elementor Pro | Behov Master Addons Pro |
| Sprog | 37 | 75 |
| Temaer | 6 (Solid, Dark, Okaidia, Solarizedlight, Tomorrow, Twilight) | 8 plus Brugerdefinerede farver |
| Kopiér knap | Kopier til Udklipsholder switch | Brugerdefineret tekst, kopieret tekst, Altid eller På Hover, to positioner, fuld styling |
| Linjetal | Ja | Ja |
| Fremhæv linjer | Ja | No |
| Ordombrydning | Ja | No |
| Højde og skriftstørrelse | Ja | Højde, plus typografi med Custom-temaet |
Vælg Elementor Pro, hvis du har brug for at fremhæve bestemte linjer eller ombryde lange linjer. Vælg Master Addons, hvis du vil have flere sprog, flere temaer eller en stilet kopi-knap. Relateret: Indholdsfortegnelse til lange tutorials og Dynamisk tabel for referencetabeller.
Kopiér knap og linjenumre
Tænd Aktiver Kopiér knap sådan tilføjer du en knap, der kopierer hele uddraget. Indstil dens Kopiér knaptekst, den Efter kopieret knaptekst vist efter et klik, Knapsynlighed (Altid eller On Hover) og Knapposition (øverst til højre eller nederst til højre). Aktiver linjenummer tilføjer tal ned i venstre side.
- Hold knappen indstillet til Altid på vejledningssider, så læserne bemærker det.
- Linjenumre gør det nemt at henvise til en linje i din tekst.
- Der er ingen mulighed for at fremhæve bestemte linjer eller ombryde lange linjer inde i widgetten.
Container og knapstyling
The Container sektion sætter en Højde (op til 1200px) så lange uddrag rulle, plus polstring, margin, kant og radius. Med Custom tema det tilføjer også en baggrund, typografi, tekstfarve og linjenummer farve. Den Button sektion styler kopiknappen med typografi, tekstfarve, baggrundsfarve, polstring, kant og radius.
- Cap højden på lange filer, så siden forbliver læsbar.
- Match knapbaggrunden til din brandfarve.
- Tilføj polstring, så koden ikke rører blokkanterne.
Ofte stillede spørgsmål til kildekode
Er widgetten Kildekode gratis?
Nej. Kildekode er en del af Master Addons Pro. Elementor Pro-brugere har også Elementors Code Highlight-widget.
Kan jeg skjule linjenumrene ved siden af koden?
Ja. Sæt Aktiver linjenummer til Nej for en renere blok.
Hvor kan jeg placere kopiknappen?
Set Knapposition til øverste højre eller nederste højre hjørne, og Knapsynlighed til altid eller på svæve.
Hvilke sprog understøtter widgetten Kildekode?
75, plukket i Code dropdown. De omfatter HTML, CSS, JavaScript, PHP, Python, Bash, SQL, JSON, YAML, Markdown, TypeScript, React JSX og TSX, Go, Java, Kotlin, Swift, Ruby, C, C ++ og C #. Besøgende kan læse og kopiere koden, men kan ikke redigere den.
Kan jeg bruge mit eget farveskema i stedet for de forudindstillede temaer?
Dels. Indstil tema til brugerdefineret for at vælge baggrund, tekstfarve, linjenummerfarve og typografi i sektionen Container-stil. Søgeordsfarver leveres kun med de otte forudindstillede temaer, så en brugerdefineret blok viser kode i én farve, medmindre du tilføjer din egen CSS.
Kan jeg fremhæve bestemte linjer?
Nej. Widgetten har ingen linjefremhævningsindstilling. Elementor Pros kodefremhævningswidget kan fremhæve valgte linjer, hvis du har brug for det.
Trending Elementor Widgets & Udvidelser
Byg sofistikerede websteder på kortere tid.
Glasmorfisme
Container ekstraudstyr
Mønstre
![Master Addons Post/Page Duplicator udvidelse til Elementor: MA Duplicator række link i WordPress Pages liste oprettelse af en Landing Page - [Duplikeret # 128] udkast](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post/Page Duplicator
