``` are powered by [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer).\nAs a result, these codeblocks support syntax highlighting for [a range of languages](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js).\n\nHighlighting specific lines is possible by passing a string to the `hl` (short for highlight-lines) attribute when writing a codeblock.\nA title may also be added to the codeblock by passing a string to the `title` attribute when writing a codeblock.\nNumbering lines is possible by passing a `numberLines` attribute.\nDon't like the copy button being there? Disable it by passing the `noCopy` attribute.\n\nThe value you pass to `hl` should be understood by [node-parse-numeric-range](https://github.com/euank/node-parse-numeric-range).\nIf passing a value to `numberLines`, it should be either `true` (to start the numbering at 1), or a decimal integer (to start the numbering at that number).\n\nThe code below will highlight the code inside as the `jsx` language, highlight lines 1,2,3, and 5, and put a small block above it displaying `src/components/CodeBlock.jsx`\nThe lines will be numbered starting at 1.\n(Omit the `#` in front of these lines, I only used them here to make the three backticks show up).\n\n````\n# ```jsx numberLines hl=1-3,5 title=src/components/CodeBlock.jsx\n# import React from 'react'\n# import Highlight, { defaultProps } from 'prism-react-renderer'\n#\n# export default ({ children, className }) => {\n# const language = className.replace(/language-/, '') || \"\"\n# return (\n# \n# {tokens.map((line, index) => {\n# const lineProps = getLineProps({ line, key: index })\n# return (\n# \n# {line.map((token, key) => (\n# \n# ))}\n# \n# )\n# }\n# )}\n# \n# )}\n# Don't let your dreams be dreams! {children}
\n);\nexport { Shia };\n```\n\nexample usage in an `.mdx` file\n\n```\n# Shia LaBeouf says:\n\n