<dy-code-block>
A component for displaying formatted code snippets with syntax highlighting. It supports line numbering, line highlighting, and range selection to focus on specific parts of the code.
Example
Loading...
<dy-code-block
style=${"width: 100%"}
.codelang=${"html"}
.range=${"-11"}
.highlight=${"8"}> <html> <head> <title>Href Attribute Example</title> </head> <body> <h1>Href Attribute Example</h1> <p> <a>The freeCodeCamp Contribution Page</a> shows you how and where you can contribute to freeCodeCamps community and growth. </p> </body> </html> Test </dy-code-block>
API
DuoyunCodeBlockElement
Extends TapCodeBlockElement
TapCodeBlockElement
Shadow DOM; Extends TapVisibleBaseElement
TapCodeBlockElement Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
codelang(codelang) |
Yes | string |
range(range) |
Yes | string |
highlight(highlight) |
Yes | string |
TapVisibleBaseElement
Extends GemElement
TapVisibleBaseElement Instance Properties
| Property(Attribute) | Reactive | Type | Description |
|---|---|---|---|
show |
Emitter |
||
hide |
Emitter |
||
fullShow |
Emitter |
Fired when the element becomes visible and entirely within the viewport, e.g. a page whose enter animation has finished. |
|
intersectionRoot |
Yes | Element | Document |
|
intersectionRootMargin |
Yes | string |
|
trackVisibility(track-visibility) |
Yes | boolean |
|
delay(delay) |
Yes | number |
TapVisibleBaseElement Other
| Type | Value |
|---|---|
| Event | show, hide, full-show |
| CSS State | visible, full-visible |