{"id":19976641,"url":"https://github.com/erossini/blazorcodesnippet","last_synced_at":"2025-10-13T17:14:09.819Z","repository":{"id":150092949,"uuid":"452213484","full_name":"erossini/BlazorCodeSnippet","owner":"erossini","description":"Add code snippet in your Blazor pages for 196 programming languages with 243 styles","archived":false,"fork":false,"pushed_at":"2022-01-26T21:56:43.000Z","size":702,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-12T10:07:26.253Z","etag":null,"topics":["blazor","blazor-component","blazor-server","blazor-ui-components","blazor-webassembly"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/erossini.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-26T09:25:52.000Z","updated_at":"2024-10-18T11:14:48.000Z","dependencies_parsed_at":"2023-06-05T07:45:30.428Z","dependency_job_id":null,"html_url":"https://github.com/erossini/BlazorCodeSnippet","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erossini%2FBlazorCodeSnippet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erossini%2FBlazorCodeSnippet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erossini%2FBlazorCodeSnippet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erossini%2FBlazorCodeSnippet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/erossini","download_url":"https://codeload.github.com/erossini/BlazorCodeSnippet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241411547,"owners_count":19958753,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","blazor-component","blazor-server","blazor-ui-components","blazor-webassembly"],"created_at":"2024-11-13T03:24:49.765Z","updated_at":"2025-10-13T17:14:04.769Z","avatar_url":"https://github.com/erossini.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Code Snippet for Blazor\nThis is a Blazor component to show code in a nice way using [highlight.js](https://highlightjs.org/) [Blazor WebAssembly](https://www.puresourcecode.com/tag/blazor-webassembly/) and [Blazor Server](https://www.puresourcecode.com/tag/blazor-server/).\nThe component is using [highlight.js](https://highlightjs.org/).\n\n## Usage\nIn your `Index.html` or `_Host` add this line\n\n```\n\u003cscript src=\"/_content/PSC.Blazor.Components.CodeSnippet/codesnippet.js\"\u003e\u003c/script\u003e\n```\n\nThen, in your `_Imports.razor` add this line \n\n```\n@using PSC.Blazor.Components.CodeSnippet\n```\n\nBased on the parameters, the component adds automatically the required scripts and CSS in your page.\n\n### Add a CodeSnippet\nFor example, I want to add a C# code with the **Visual Studio* Style. Between the CodeSnippet tag, you have to add the code you want to show. This is the code.\n\n```\n\u003cCodeSnippet Language=\"Language.csharp\" Style=\"Style.VisualStudio\"\u003e\nprotected override async Task OnAfterRenderAsync(bool firstRender)\n{\n    await _js.InvokeVoidAsync(\"loadJs\", targetUrl);\n}\n\u003c/CodeSnippet\u003e\n```\n\nThen, I want to add a new CodeSnippet using XML and the style of **Android Studio**. You have to replace special characters like \u0026lt; (\u0026amp;lt;) with the corrispondent HTML code.\nIf you have multiple `CodeSnippet` in the same pag, you can avoid to load multiple times the `highlight.js` setting to `false` the parameter `LoadMainScript`.\n\n```\n\u003cCodeSnippet Language=\"Language.xml\" Style=\"Style.AndroidStudio\" LoadMainScript=\"false\"\u003e\n\u0026lt;CodeSnippet Language=\"Language.xml\"\u003e\n\u0026lt;/CodeSnippet\u003e\n\u003c/CodeSnippet\u003e\n```\n\n## Supported languages\n\n| Language | Script |\n|----------|--------|\n| 1c | 1c.min.js | \n| abnf | abnf.min.js | \n| accesslog | accesslog.min.js | \n| actionscript | actionscript.min.js | \n| ada | ada.min.js | \n| angelscript | angelscript.min.js | \n| apache | apache.min.js | \n| applescript | applescript.min.js | \n| arcade | arcade.min.js | \n| arduino | arduino.min.js | \n| armasm | armasm.min.js | \n| asciidoc | asciidoc.min.js | \n| aspectj | aspectj.min.js | \n| autohotkey | autohotkey.min.js | \n| autoit | autoit.min.js | \n| avrasm | avrasm.min.js | \n| awk | awk.min.js | \n| axapta | axapta.min.js | \n| bash | bash.min.js | \n| basic | basic.min.js | \n| bnf | bnf.min.js | \n| brainfuck | brainfuck.min.js | \n| c | c.min.js | \n| cal | cal.min.js | \n| capnproto | capnproto.min.js | \n| ceylon | ceylon.min.js | \n| clean | clean.min.js | \n| clojure-repl | clojure-repl.min.js | \n| clojure | clojure.min.js | \n| cmake | cmake.min.js | \n| coffeescript | coffeescript.min.js | \n| coq | coq.min.js | \n| cos | cos.min.js | \n| cpp | cpp.min.js | \n| crmsh | crmsh.min.js | \n| crystal | crystal.min.js | \n| csharp | csharp.min.js | \n| csp | csp.min.js | \n| css | css.min.js | \n| d | d.min.js | \n| dart | dart.min.js | \n| delphi | delphi.min.js | \n| diff | diff.min.js | \n| django | django.min.js | \n| dns | dns.min.js | \n| dockerfile | dockerfile.min.js | \n| dos | dos.min.js | \n| dsconfig | dsconfig.min.js | \n| dts | dts.min.js | \n| dust | dust.min.js | \n| ebnf | ebnf.min.js | \n| elixir | elixir.min.js | \n| elm | elm.min.js | \n| erb | erb.min.js | \n| erlang-repl | erlang-repl.min.js | \n| erlang | erlang.min.js | \n| excel | excel.min.js | \n| fix | fix.min.js | \n| flix | flix.min.js | \n| fortran | fortran.min.js | \n| fsharp | fsharp.min.js | \n| gams | gams.min.js | \n| gauss | gauss.min.js | \n| gcode | gcode.min.js | \n| gherkin | gherkin.min.js | \n| glsl | glsl.min.js | \n| gml | gml.min.js | \n| go | go.min.js | \n| golo | golo.min.js | \n| gradle | gradle.min.js | \n| groovy | groovy.min.js | \n| haml | haml.min.js | \n| handlebars | handlebars.min.js | \n| haskell | haskell.min.js | \n| haxe | haxe.min.js | \n| hsp | hsp.min.js | \n| http | http.min.js | \n| hy | hy.min.js | \n| inform7 | inform7.min.js | \n| ini | ini.min.js | \n| irpf90 | irpf90.min.js | \n| isbl | isbl.min.js | \n| java | java.min.js | \n| javascript | javascript.min.js | \n| jboss-cli | jboss-cli.min.js | \n| json | json.min.js | \n| julia-repl | julia-repl.min.js | \n| julia | julia.min.js | \n| kotlin | kotlin.min.js | \n| lasso | lasso.min.js | \n| latex | latex.min.js | \n| ldif | ldif.min.js | \n| leaf | leaf.min.js | \n| less | less.min.js | \n| lisp | lisp.min.js | \n| livecodeserver | livecodeserver.min.js | \n| livescript | livescript.min.js | \n| llvm | llvm.min.js | \n| lsl | lsl.min.js | \n| lua | lua.min.js | \n| makefile | makefile.min.js | \n| markdown | markdown.min.js | \n| mathematica | mathematica.min.js | \n| matlab | matlab.min.js | \n| maxima | maxima.min.js | \n| mel | mel.min.js | \n| mercury | mercury.min.js | \n| mipsasm | mipsasm.min.js | \n| mizar | mizar.min.js | \n| mojolicious | mojolicious.min.js | \n| monkey | monkey.min.js | \n| moonscript | moonscript.min.js | \n| n1ql | n1ql.min.js | \n| nestedtext | nestedtext.min.js | \n| nginx | nginx.min.js | \n| nim | nim.min.js | \n| nix | nix.min.js | \n| node-repl | node-repl.min.js | \n| nsis | nsis.min.js | \n| objectivec | objectivec.min.js | \n| ocaml | ocaml.min.js | \n| openscad | openscad.min.js | \n| oxygene | oxygene.min.js | \n| parser3 | parser3.min.js | \n| perl | perl.min.js | \n| pf | pf.min.js | \n| pgsql | pgsql.min.js | \n| php-template | php-template.min.js | \n| php | php.min.js | \n| plaintext | plaintext.min.js | \n| pony | pony.min.js | \n| powershell | powershell.min.js | \n| processing | processing.min.js | \n| profile | profile.min.js | \n| prolog | prolog.min.js | \n| properties | properties.min.js | \n| protobuf | protobuf.min.js | \n| puppet | puppet.min.js | \n| purebasic | purebasic.min.js | \n| python-repl | python-repl.min.js | \n| python | python.min.js | \n| q | q.min.js | \n| qml | qml.min.js | \n| r | r.min.js | \n| reasonml | reasonml.min.js | \n| rib | rib.min.js | \n| roboconf | roboconf.min.js | \n| routeros | routeros.min.js | \n| rsl | rsl.min.js | \n| ruby | ruby.min.js | \n| ruleslanguage | ruleslanguage.min.js | \n| rust | rust.min.js | \n| sas | sas.min.js | \n| scala | scala.min.js | \n| scheme | scheme.min.js | \n| scilab | scilab.min.js | \n| scss | scss.min.js | \n| shell | shell.min.js | \n| smali | smali.min.js | \n| smalltalk | smalltalk.min.js | \n| sml | sml.min.js | \n| sqf | sqf.min.js | \n| sql | sql.min.js | \n| stan | stan.min.js | \n| stata | stata.min.js | \n| step21 | step21.min.js | \n| stylus | stylus.min.js | \n| subunit | subunit.min.js | \n| swift | swift.min.js | \n| taggerscript | taggerscript.min.js | \n| tap | tap.min.js | \n| tcl | tcl.min.js | \n| thrift | thrift.min.js | \n| tp | tp.min.js | \n| twig | twig.min.js | \n| typescript | typescript.min.js | \n| vala | vala.min.js | \n| vbnet | vbnet.min.js | \n| vbscript-html | vbscript-html.min.js | \n| vbscript | vbscript.min.js | \n| verilog | verilog.min.js | \n| vhdl | vhdl.min.js | \n| vim | vim.min.js | \n| wasm | wasm.min.js | \n| wren | wren.min.js | \n| x86asm | x86asm.min.js | \n| xl | xl.min.js | \n| xml | xml.min.js | \n| xquery | xquery.min.js | \n| yaml | yaml.min.js | \n| zephir | zephir.min.js | \n\n## Supported style\n\n| Style | CSS file |\n|-------|----------|\n| a11y-dark | a11y-dark.min.css |\n| a11y-light | a11y-light.min.css |\n| agate | agate.min.css |\n| an-old-hope | an-old-hope.min.css |\n| androidstudio | androidstudio.min.css |\n| arduino-light | arduino-light.min.css |\n| arta | arta.min.css |\n| ascetic | ascetic.min.css |\n| atom-one-dark-reasonable | atom-one-dark-reasonable.min.css |\n| atom-one-dark | atom-one-dark.min.css |\n| atom-one-light | atom-one-light.min.css |\n| brown-paper | brown-paper.min.css |\n| brown-papersq.png | brown-papersq.png |\n| codepen-embed | codepen-embed.min.css |\n| color-brewer | color-brewer.min.css |\n| dark | dark.min.css |\n| default | default.min.css |\n| devibeans | devibeans.min.css |\n| docco | docco.min.css |\n| far | far.min.css |\n| foundation | foundation.min.css |\n| github-dark-dimmed | github-dark-dimmed.min.css |\n| github-dark | github-dark.min.css |\n| github | github.min.css |\n| gml | gml.min.css |\n| googlecode | googlecode.min.css |\n| gradient-dark | gradient-dark.min.css |\n| gradient-light | gradient-light.min.css |\n| grayscale | grayscale.min.css |\n| hybrid | hybrid.min.css |\n| idea | idea.min.css |\n| ir-black | ir-black.min.css |\n| isbl-editor-dark | isbl-editor-dark.min.css |\n| isbl-editor-light | isbl-editor-light.min.css |\n| kimbie-dark | kimbie-dark.min.css |\n| kimbie-light | kimbie-light.min.css |\n| lightfair | lightfair.min.css |\n| lioshi | lioshi.min.css |\n| magula | magula.min.css |\n| mono-blue | mono-blue.min.css |\n| monokai-sublime | monokai-sublime.min.css |\n| monokai | monokai.min.css |\n| night-owl | night-owl.min.css |\n| nnfx-dark | nnfx-dark.min.css |\n| nnfx-light | nnfx-light.min.css |\n| nord | nord.min.css |\n| obsidian | obsidian.min.css |\n| paraiso-dark | paraiso-dark.min.css |\n| paraiso-light | paraiso-light.min.css |\n| pojoaque.jpg | pojoaque.jpg |\n| pojoaque | pojoaque.min.css |\n| purebasic | purebasic.min.css |\n| qtcreator-dark | qtcreator-dark.min.css |\n| qtcreator-light | qtcreator-light.min.css |\n| rainbow | rainbow.min.css |\n| routeros | routeros.min.css |\n| school-book | school-book.min.css |\n| shades-of-purple | shades-of-purple.min.css |\n| srcery | srcery.min.css |\n| stackoverflow-dark | stackoverflow-dark.min.css |\n| stackoverflow-light | stackoverflow-light.min.css |\n| sunburst | sunburst.min.css |\n| tomorrow-night-blue | tomorrow-night-blue.min.css |\n| tomorrow-night-bright | tomorrow-night-bright.min.css |\n| vs | vs.min.css |\n| vs2015 | vs2015.min.css |\n| xcode | xcode.min.css |\n| xt256 | xt256.min.css |\n\n## Examples\n\n### CSharp (Visual Studio style)\n![CSharp with Code Snippet for Blazor](https://user-images.githubusercontent.com/9497415/151179961-7c4b7477-1ee2-4d71-95c1-5955e6c2ba7d.png)\n\n### Java (Android Studio style)\n![Java with Code Snippet for Blazor](https://user-images.githubusercontent.com/9497415/151179370-1ce9fb6f-bd28-4d09-8c7a-dce1e9e91d12.png)\n\n### Swift (XCode style)\n![Swift with Code Snippet for Blazor](https://user-images.githubusercontent.com/9497415/151178395-5210843f-2ddd-4e36-86c1-38eb04d1e1b4.png)\n\n---\n\n## Other Blazor components\n\n| Component name | Forum | Description |\n|---|---|---|\n| [DataTable for Blazor](https://www.puresourcecode.com/dotnet/net-core/datatable-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/datatables/) | DataTable component for Blazor WebAssembly and Blazor Server |\n| [Markdown editor for Blazor](https://www.puresourcecode.com/dotnet/blazor/markdown-editor-with-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/markdown-editor-for-blazor/) |  This is a Markdown Editor for use in Blazor. It contains a live preview as well as an embeded help guide for users. |\n| [CodeSnipper for Blazor](https://www.puresourcecode.com/dotnet/blazor/add-code-snippet-in-razor-pages/) | [Forum](https://www.puresourcecode.com/forum/codesnippet-for-blazor/) | Add code snippet in your Blazor pages for 196 programming languages with 243 styles |\n| [Copy To Clipboard](https://www.puresourcecode.com/dotnet/blazor/copy-to-clipboard-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/copytoclipboard/) | Add a button to copy text in the clipbord | \n| SVG Icons and flags for Blazor | [Forum](https://www.puresourcecode.com/forum/icons-and-flags-for-blazor/) | Library with a lot of SVG icons and SVG flags to use in your Razor pages |\n| [Modal dialog for Blazor](https://www.puresourcecode.com/dotnet/blazor/modal-dialog-component-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/modal-dialog-for-blazor/) |  Simple Modal Dialog for Blazor WebAssembly |\n| [PSC.Extensions](https://www.puresourcecode.com/dotnet/net-core/a-lot-of-functions-for-net5/) | [Forum](https://www.puresourcecode.com/forum/forum/psc-extensions/) |  A lot of functions for .NET5 in a NuGet package that you can download for free. We collected in this package functions for everyday work to help you with claim, strings, enums, date and time, expressions... |\n| [Quill for Blazor](https://www.puresourcecode.com/dotnet/blazor/create-a-blazor-component-for-quill/) | [Forum](https://www.puresourcecode.com/forum/forum/quill-for-blazor/) |  Quill Component is a custom reusable control that allows us to easily consume Quill and place multiple instances of it on a single page in our Blazor application |\n| [Segment for Blazor](https://www.puresourcecode.com/dotnet/blazor/segment-control-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/segments-for-blazor/) |  This is a Segment component for Blazor Web Assembly and Blazor Server |\n| [Tabs for Blazor](https://www.puresourcecode.com/dotnet/blazor/tabs-control-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/forum/tabs-for-blazor/) |  This is a Tabs component for Blazor Web Assembly and Blazor Server |\n| [WorldMap for Blazor]() | [Forum](https://www.puresourcecode.com/forum/worldmap-for-blazor/) | [Forum](https://www.puresourcecode.com/forum/worldmap-for-blazor/) | Show world maps with your data |\n\n## More examples and documentation\n*   [Write a reusable Blazor component](https://www.puresourcecode.com/dotnet/blazor/write-a-reusable-blazor-component/)\n*   [Getting Started With C# And Blazor](https://www.puresourcecode.com/dotnet/net-core/getting-started-with-c-and-blazor/)\n*   [Setting Up A Blazor WebAssembly Application](https://www.puresourcecode.com/dotnet/blazor/setting-up-a-blazor-webassembly-application/)\n*   [Working With Blazor Component Model](https://www.puresourcecode.com/dotnet/blazor/working-with-blazors-component-model/)\n*   [Secure Blazor WebAssembly With IdentityServer4](https://www.puresourcecode.com/dotnet/blazor/secure-blazor-webassembly-with-identityserver4/)\n*   [Blazor Using HttpClient With Authentication](https://www.puresourcecode.com/dotnet/blazor/blazor-using-httpclient-with-authentication/)\n*   [InputSelect component for enumerations in Blazor](https://www.puresourcecode.com/dotnet/blazor/inputselect-component-for-enumerations-in-blazor/)\n*   [Use LocalStorage with Blazor WebAssembly](https://www.puresourcecode.com/dotnet/blazor/use-localstorage-with-blazor-webassembly/)\n*   [Modal Dialog component for Blazor](https://www.puresourcecode.com/dotnet/blazor/modal-dialog-component-for-blazor/)\n*   [Create Tooltip component for Blazor](https://www.puresourcecode.com/dotnet/blazor/create-tooltip-component-for-blazor/)\n*   [Consume ASP.NET Core Razor components from Razor class libraries | Microsoft Docs](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/class-libraries?view=aspnetcore-5.0\u0026tabs=visual-studio)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferossini%2Fblazorcodesnippet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferossini%2Fblazorcodesnippet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferossini%2Fblazorcodesnippet/lists"}