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;
endmodule
dma_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

PropTypeDefaultDescription
codestringThe source text
filenamestringHeader tab label
languagestringMono badge in the header
showLineNumbersbooleantrueLine-number gutter (excluded from selection)
highlightLinesnumber[][]1-based lines to emphasize
diffbooleanfalseRead leading +/− as diff markers
maxHeightnumberScroll the body beyond this height