Brism brings the power of PrismJS to Blazor, making your code examples look fantastic with minimal effort. Perfect for documentation, blogs, or any application that needs beautiful code snippets.
- Syntax highlighting that actually looks good
- Line numbers (that you can toggle on/off)
- Cool command-line styling for terminal examples
- Works seamlessly with Blazor Server and WebAssembly
- Pick from various themes to match your site
- Super easy to set up (seriously, it takes like 2 minutes)
- Type-safe language selection (no more typos!)
dotnet add package BrismIn your App.razor file (or _Host.cshtml for Server-side Blazor), add these lines in the <head> section:
<!-- Base PrismJS styles (required) -->
<link href="_content/Brism/prism.css" rel="stylesheet" />
<!-- Choose ONE theme from below (we're using synthwave84 as an example) -->
<link href="_content/Brism/prism-synthwave84.css" rel="stylesheet" />And these scripts at the end of the <body>:
<script src="_content/Brism/prism.js"></script>
<script type="module" src="_content/Brism/prismInterop.js"></script>Add this to your Program.cs:
builder.Services.AddBrism();Add this to your _Imports.razor:
@using BrismDrop this into any of your Blazor pages:
<CodeBlock
Code="@myCode"
Language="CodeLanguage.CSharp"
EnableLineNumbers="true" />-
Modern & Sleek
prism-one-dark.css- Atom's One Darkprism-material-dark.css- Material Design inspiredprism-vsc-dark-plus.css- VS Code dark themeprism-dracula.css- Famous Dracula themeprism-synthwave84.css- Retro synthwave vibes
-
Rich & Deep
prism-night-owl.css- Perfect for night codingprism-nord.css- Cool Nordic themeprism-material-oceanic.css- Deep blue oceanicprism-darcula.css- IntelliJ-inspiredprism-shades-of-purple.css- Vibrant purple theme
-
Nature-Inspired
prism-duotone-dark.css- Subtle two-tone darkprism-duotone-forest.css- Forest-inspired colorsprism-duotone-earth.css- Earthy tonesprism-duotone-sea.css- Ocean-inspired themeprism-duotone-space.css- Space-like dark theme
-
Clean & Professional
prism-one-light.css- Atom's One Light themeprism-material-light.css- Material Design lightprism-vs.css- Visual Studio inspired
-
Soft & Gentle
prism-duotone-light.css- Gentle two-tone lightprism-gruvbox-light.css- Soft retro colorsprism-coldark-cold.css- Cool light tones
- Unique Styles
prism-lucario.css- Pokémon-inspiredprism-hopscotch.css- Playful and colorfulprism-holi-theme.css- Festive and brightprism-laserwave.css- Retro laser themeprism-z-touch.css- Modern touch
prism-a11y-dark.css- Accessibility-focused dark themeprism-cb.css- Color-blind friendlyprism-ghcolors.css- GitHub-like colors
Here's what you can tweak:
| Property | What it does | Default |
|---|---|---|
| Code | Your code snippet (required) | - |
| Language | The language for highlighting (required) | - |
| EnableLineNumbers | Show/hide line numbers | true |
| EnableCommandLine | Add a command prompt look | false |
| CommandLineUser | Custom prompt user | "User" |
| CommandLineHost | Custom prompt host | "Host" |
| Css | Extra CSS if you need it | "" |
No more guessing language names or dealing with typos! We provide a handy CodeLanguage enum with constants for all supported languages. Here are some popular ones:
// Common languages
CodeLanguage.CSharp // for C#
CodeLanguage.JavaScript // for JavaScript
CodeLanguage.TypeScript // for TypeScript
CodeLanguage.Python // for Python
CodeLanguage.Html // for HTML
CodeLanguage.Css // for CSS
CodeLanguage.Json // for JSON
CodeLanguage.Sql // for SQL
CodeLanguage.Docker // for Dockerfiles
CodeLanguage.Yaml // for YAML/YML
CodeLanguage.Markdown // for Markdown
CodeLanguage.Bash // for Shell scriptsAnd that's just the tip of the iceberg! We support 180+ languages, including:
- All major web technologies
- Popular programming languages
- Markup and styling languages
- Configuration formats
- Domain-specific languages
- And tons more!
Just use the CodeLanguage enum to ensure you're always using the correct language identifier.
Perfect for showing terminal commands:
<CodeBlock
Code="npm install something-cool"
Language="CodeLanguage.Bash"
EnableCommandLine="true"
CommandLineUser="dev"
CommandLineHost="laptop" />When you just want the code without the extras:
<CodeBlock
Code="@myCleanCode"
Language="CodeLanguage.CSharp"
EnableLineNumbers="false" />Mix and match different languages:
<CodeBlock Code="@cssCode" Language="CodeLanguage.Css" />
<CodeBlock Code="@htmlCode" Language="CodeLanguage.Html" />
<CodeBlock Code="@jsCode" Language="CodeLanguage.JavaScript" />We'd love to have you on board! Here's how you can contribute:
- Fork it
- Create your feature branch (
git checkout -b feature/cool-new-thing) - Make your changes
- Push to the branch (
git push origin feature/cool-new-thing) - Open a Pull Request
Even small improvements are welcome - found a typo? Fixed a bug? We appreciate all contributions!
This project is under the MIT License - basically, you can do whatever you want with it, just keep the license notice. See the LICENSE file for the formal details.
If Brism makes your life easier:
- Give us a star on GitHub
- Tell your fellow devs about it
- Found a bug? Open an issue
- Have an idea? Let's hear it!
Big thanks to:
- The amazing PrismJS team
- Everyone who has contributed
- You, for checking out our project!
Built with passion for the Blazor community