PSC.Blazor.Components.CodeSnippet 1.0.3

dotnet add package PSC.Blazor.Components.CodeSnippet --version 1.0.3                
NuGet\Install-Package PSC.Blazor.Components.CodeSnippet -Version 1.0.3                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="PSC.Blazor.Components.CodeSnippet" Version="1.0.3" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add PSC.Blazor.Components.CodeSnippet --version 1.0.3                
#r "nuget: PSC.Blazor.Components.CodeSnippet, 1.0.3"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install PSC.Blazor.Components.CodeSnippet as a Cake Addin
#addin nuget:?package=PSC.Blazor.Components.CodeSnippet&version=1.0.3

// Install PSC.Blazor.Components.CodeSnippet as a Cake Tool
#tool nuget:?package=PSC.Blazor.Components.CodeSnippet&version=1.0.3                

Code Snippet for Blazor

This is a Blazor component to show code in a nice way using highlight.js Blazor WebAssembly and Blazor Server. The component is using highlight.js.

Usage

In your Index.html or _Host add this line

<script src="/_content/PSC.Blazor.Components.CodeSnippet/codesnippet.js"></script>

Then, in your _Imports.razor add this line

@using PSC.Blazor.Components.CodeSnippet

Based on the parameters, the component adds automatically the required scripts and CSS in your page.

Add a CodeSnippet

For example, I want to add a C# code with the *Visual Studio Style. Between the CodeSippet tag, you have to add the code you want to show. This is the code.

<CodeSnippet Language="Language.csharp" Style="Style.VisualStudio">
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    await _js.InvokeVoidAsync("loadJs", targetUrl);
}
</CodeSnippet>

Then, I want to add a new CodeSnippet using XML and the style of Android Studio. You have to replace special characters like < (&lt;) with the corrispondent HTML code. If you have multiple CodeSnippet in the same pag, you can avoid to load multiple times the highlight.js setting to false the parameter LoadMainScript.

<CodeSnippet Language="Language.xml" Style="Style.AndroidStudio" LoadMainScript="false">
&lt;CodeSnippet Language="Language.xml">
&lt;/CodeSnippet>
</CodeSnippet>

Supported languages

Language Script
1c 1c.min.js
abnf abnf.min.js
accesslog accesslog.min.js
actionscript actionscript.min.js
ada ada.min.js
angelscript angelscript.min.js
apache apache.min.js
applescript applescript.min.js
arcade arcade.min.js
arduino arduino.min.js
armasm armasm.min.js
asciidoc asciidoc.min.js
aspectj aspectj.min.js
autohotkey autohotkey.min.js
autoit autoit.min.js
avrasm avrasm.min.js
awk awk.min.js
axapta axapta.min.js
bash bash.min.js
basic basic.min.js
bnf bnf.min.js
brainfuck brainfuck.min.js
c c.min.js
cal cal.min.js
capnproto capnproto.min.js
ceylon ceylon.min.js
clean clean.min.js
clojure-repl clojure-repl.min.js
clojure clojure.min.js
cmake cmake.min.js
coffeescript coffeescript.min.js
coq coq.min.js
cos cos.min.js
cpp cpp.min.js
crmsh crmsh.min.js
crystal crystal.min.js
csharp csharp.min.js
csp csp.min.js
css css.min.js
d d.min.js
dart dart.min.js
delphi delphi.min.js
diff diff.min.js
django django.min.js
dns dns.min.js
dockerfile dockerfile.min.js
dos dos.min.js
dsconfig dsconfig.min.js
dts dts.min.js
dust dust.min.js
ebnf ebnf.min.js
elixir elixir.min.js
elm elm.min.js
erb erb.min.js
erlang-repl erlang-repl.min.js
erlang erlang.min.js
excel excel.min.js
fix fix.min.js
flix flix.min.js
fortran fortran.min.js
fsharp fsharp.min.js
gams gams.min.js
gauss gauss.min.js
gcode gcode.min.js
gherkin gherkin.min.js
glsl glsl.min.js
gml gml.min.js
go go.min.js
golo golo.min.js
gradle gradle.min.js
groovy groovy.min.js
haml haml.min.js
handlebars handlebars.min.js
haskell haskell.min.js
haxe haxe.min.js
hsp hsp.min.js
http http.min.js
hy hy.min.js
inform7 inform7.min.js
ini ini.min.js
irpf90 irpf90.min.js
isbl isbl.min.js
java java.min.js
javascript javascript.min.js
jboss-cli jboss-cli.min.js
json json.min.js
julia-repl julia-repl.min.js
julia julia.min.js
kotlin kotlin.min.js
lasso lasso.min.js
latex latex.min.js
ldif ldif.min.js
leaf leaf.min.js
less less.min.js
lisp lisp.min.js
livecodeserver livecodeserver.min.js
livescript livescript.min.js
llvm llvm.min.js
lsl lsl.min.js
lua lua.min.js
makefile makefile.min.js
markdown markdown.min.js
mathematica mathematica.min.js
matlab matlab.min.js
maxima maxima.min.js
mel mel.min.js
mercury mercury.min.js
mipsasm mipsasm.min.js
mizar mizar.min.js
mojolicious mojolicious.min.js
monkey monkey.min.js
moonscript moonscript.min.js
n1ql n1ql.min.js
nestedtext nestedtext.min.js
nginx nginx.min.js
nim nim.min.js
nix nix.min.js
node-repl node-repl.min.js
nsis nsis.min.js
objectivec objectivec.min.js
ocaml ocaml.min.js
openscad openscad.min.js
oxygene oxygene.min.js
parser3 parser3.min.js
perl perl.min.js
pf pf.min.js
pgsql pgsql.min.js
php-template php-template.min.js
php php.min.js
plaintext plaintext.min.js
pony pony.min.js
powershell powershell.min.js
processing processing.min.js
profile profile.min.js
prolog prolog.min.js
properties properties.min.js
protobuf protobuf.min.js
puppet puppet.min.js
purebasic purebasic.min.js
python-repl python-repl.min.js
python python.min.js
q q.min.js
qml qml.min.js
r r.min.js
reasonml reasonml.min.js
rib rib.min.js
roboconf roboconf.min.js
routeros routeros.min.js
rsl rsl.min.js
ruby ruby.min.js
ruleslanguage ruleslanguage.min.js
rust rust.min.js
sas sas.min.js
scala scala.min.js
scheme scheme.min.js
scilab scilab.min.js
scss scss.min.js
shell shell.min.js
smali smali.min.js
smalltalk smalltalk.min.js
sml sml.min.js
sqf sqf.min.js
sql sql.min.js
stan stan.min.js
stata stata.min.js
step21 step21.min.js
stylus stylus.min.js
subunit subunit.min.js
swift swift.min.js
taggerscript taggerscript.min.js
tap tap.min.js
tcl tcl.min.js
thrift thrift.min.js
tp tp.min.js
twig twig.min.js
typescript typescript.min.js
vala vala.min.js
vbnet vbnet.min.js
vbscript-html vbscript-html.min.js
vbscript vbscript.min.js
verilog verilog.min.js
vhdl vhdl.min.js
vim vim.min.js
wasm wasm.min.js
wren wren.min.js
x86asm x86asm.min.js
xl xl.min.js
xml xml.min.js
xquery xquery.min.js
yaml yaml.min.js
zephir zephir.min.js

Supported style

Style CSS file
a11y-dark a11y-dark.min.css
a11y-light a11y-light.min.css
agate agate.min.css
an-old-hope an-old-hope.min.css
androidstudio androidstudio.min.css
arduino-light arduino-light.min.css
arta arta.min.css
ascetic ascetic.min.css
atom-one-dark-reasonable atom-one-dark-reasonable.min.css
atom-one-dark atom-one-dark.min.css
atom-one-light atom-one-light.min.css
brown-paper brown-paper.min.css
brown-papersq.png brown-papersq.png
codepen-embed codepen-embed.min.css
color-brewer color-brewer.min.css
dark dark.min.css
default default.min.css
devibeans devibeans.min.css
docco docco.min.css
far far.min.css
foundation foundation.min.css
github-dark-dimmed github-dark-dimmed.min.css
github-dark github-dark.min.css
github github.min.css
gml gml.min.css
googlecode googlecode.min.css
gradient-dark gradient-dark.min.css
gradient-light gradient-light.min.css
grayscale grayscale.min.css
hybrid hybrid.min.css
idea idea.min.css
ir-black ir-black.min.css
isbl-editor-dark isbl-editor-dark.min.css
isbl-editor-light isbl-editor-light.min.css
kimbie-dark kimbie-dark.min.css
kimbie-light kimbie-light.min.css
lightfair lightfair.min.css
lioshi lioshi.min.css
magula magula.min.css
mono-blue mono-blue.min.css
monokai-sublime monokai-sublime.min.css
monokai monokai.min.css
night-owl night-owl.min.css
nnfx-dark nnfx-dark.min.css
nnfx-light nnfx-light.min.css
nord nord.min.css
obsidian obsidian.min.css
paraiso-dark paraiso-dark.min.css
paraiso-light paraiso-light.min.css
pojoaque.jpg pojoaque.jpg
pojoaque pojoaque.min.css
purebasic purebasic.min.css
qtcreator-dark qtcreator-dark.min.css
qtcreator-light qtcreator-light.min.css
rainbow rainbow.min.css
routeros routeros.min.css
school-book school-book.min.css
shades-of-purple shades-of-purple.min.css
srcery srcery.min.css
stackoverflow-dark stackoverflow-dark.min.css
stackoverflow-light stackoverflow-light.min.css
sunburst sunburst.min.css
tomorrow-night-blue tomorrow-night-blue.min.css
tomorrow-night-bright tomorrow-night-bright.min.css
vs vs.min.css
vs2015 vs2015.min.css
xcode xcode.min.css
xt256 xt256.min.css

Examples

CSharp (Visual Studio style)

CSharp with Code Snippet for Blazor

Java (Android Studio style)

Java with Code Snippet for Blazor

Swift (XCode style)

Swift with Code Snippet for Blazor


Other Blazor components

Component name Forum Description
DataTable for Blazor Forum DataTable component for Blazor WebAssembly and Blazor Server
Markdown editor for Blazor Forum This is a Markdown Editor for use in Blazor. It contains a live preview as well as an embeded help guide for users.
CodeSnipper for Blazor Forum Add code snippet in your Blazor pages for 196 programming languages with 243 styles
Copy To Clipboard Forum Add a button to copy text in the clipbord
SVG Icons and flags for Blazor Forum Library with a lot of SVG icons and SVG flags to use in your Razor pages
Modal dialog for Blazor Forum Simple Modal Dialog for Blazor WebAssembly
PSC.Extensions Forum 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...
Quill for Blazor Forum 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
Segment for Blazor Forum This is a Segment component for Blazor Web Assembly and Blazor Server
Tabs for Blazor Forum This is a Tabs component for Blazor Web Assembly and Blazor Server
WorldMap for Blazor Forum Forum Show world maps with your data

More examples and documentation

Product Compatible and additional computed target framework versions.
.NET net6.0 is compatible.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.0.3 6,708 1/26/2022
1.0.2 447 1/26/2022
1.0.1 434 1/26/2022
1.0.0 430 1/26/2022