React Code Block
Code display for app UIs and docs — RTL snippets, config files, API examples — with zero dependencies: a filename tab with language badge, line numbers, line highlighting with the primary rail, and a diff mode that reads leading +/− markers (added lines wash green, removed wash red, and the copy button strips the markers so pasted code is clean). Pair it with a real highlighter later if you need full syntax color; the structure won't change.
dma_ctrl.vverilog
module dma_ctrl #( parameter ADDR_W = 32, parameter DATA_W = 128) ( input wire aclk, input wire aresetn, input wire [ADDR_W-1:0] awaddr, input wire awvalid, output wire awready); // Write-1-to-clear error flag always @(posedge aclk or negedge aresetn) if (!aresetn) err_q <= 1'b0; else if (wr_err) err_q <= 1'b1; else if (w1c_err) err_q <= 1'b0; endmoduledma_ctrl.vdiff
− localparam FIFO_DEPTH = 16;+ localparam FIFO_DEPTH = 32; localparam FIFO_W = DATA_W; − assign awready = !fifo_full;+ // Backpressure one cycle early to close timing at 1.2 GHz+ assign awready = !fifo_almost_full;Highlighted lines carry the primary rail; diff mode reads leading +/− markers and copies clean code.
Installation
npx shadcn@latest add code-block.json
Usage
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| code | string | — | The source text |
| filename | string | — | Header tab label |
| language | string | — | Mono badge in the header |
| showLineNumbers | boolean | true | Line-number gutter (excluded from selection) |
| highlightLines | number[] | [] | 1-based lines to emphasize |
| diff | boolean | false | Read leading +/− as diff markers |
| maxHeight | number | — | Scroll the body beyond this height |