diff --git a/example/src/app.scss b/example/src/app.scss index 8daae9a..5948ba2 100644 --- a/example/src/app.scss +++ b/example/src/app.scss @@ -552,3 +552,45 @@ code[class*="language-"], pre[class*="language-"] { margin-bottom: 1rem; display: inline-block; } + +pre.line-numbers { + position: relative; + padding-left: 3.8em; + counter-reset: linenumber; + > code { + position: relative; + white-space: inherit; + overflow-y: visible; + } +} + +.line-numbers .line-numbers-rows { + position: absolute; + pointer-events: none; + top: 0; + font-size: 100%; + left: -3.8em; + width: 3em; + margin-top: 0; + /* works for line-numbers below 1000 lines */ + letter-spacing: -1px; + border-right: 1px solid #999; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.line-numbers-rows > span { + pointer-events: none; + display: block; + counter-increment: linenumber; + margin-top: 0; + &:before { + content: counter(linenumber); + color: #999; + display: block; + padding-right: 0.8em; + text-align: right; + } +} \ No newline at end of file diff --git a/example/src/components/JsonLinkInlineExamples.js b/example/src/components/JsonLinkInlineExamples.js index 045eb0a..bc45714 100644 --- a/example/src/components/JsonLinkInlineExamples.js +++ b/example/src/components/JsonLinkInlineExamples.js @@ -59,7 +59,7 @@ export default class JsonLinkInlineExamples extends React.Component { onShow={this.onShow} description={
This is a description for the JsonLinkInline component.
} /> -
+
{`
-
+
{this.props.children}
@@ -37,8 +39,10 @@ export default class CodeBlock extends React.Component {
CodeBlock.propTypes = {
children: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.element]).isRequired,
language: PropTypes.oneOf(languages),
+ lineNumbers: PropTypes.bool,
};
CodeBlock.defaultProps = {
language: 'js',
+ lineNumbers: false,
};