Skip to main content

Import Code To View

Inside markdown​

You can import any code file as raw text, and then insert it in a code block.

Install raw-loader:

npm install --save-dev raw-loader

Now you can import code snippets from another file as it is.

Add this to markdown file:

import BrowserWindow from '@site/src/components/BrowserWindow'

```mdx-code-block
import CodeBlock from '@theme/CodeBlock';
import MyComponentSource from '!!raw-loader!@site/src/pages/BackgroundImage';

<CodeBlock language="jsx">{MyComponentSource}</CodeBlock>
```

to get this:

http://localhost:3000
import React from 'react';
import styles from './styles.module.css';

const BackgroundImage = (props) => {
  return (
    <div
      className="showcaseFavorite_src-pages-showcase-styles-module"
      style={{paddingBottom: '0px'}}>
      <div className="container">
        <section className="margin-top--lg margin-bottom--xl">
          <div className={styles.portfolio_section__projects}>
            {props.photos ? (
              props.photos.map((item) => (
                <div
                  key={item.title}
                  className={styles.portfolio_section__project}>
                  <div
                    className={styles.portfolio_section__project_image}
                    style={{
                      backgroundImage: item.url,
                      transition:
                        'background-image 0.3s ease-in-out 0s, background-size 0.2s ease 0s',
                      filter: 'none',
                    }}></div>
                  <div className={styles.portfolio_section__project_title}>
                    {item.title}
                  </div>
                  <div
                    className={styles.portfolio_section__project_description}>
                    {item.text}
                  </div>
                </div>
              ))
            ) : (
              <p>Photos is empty</p>
            )}
          </div>
        </section>
      </div>
    </div>
  );
};

export default BackgroundImage;
;

This way, you can reuse content among multiple pages and avoid duplicating materials.

Outside markdown​

Outside of Markdown, you can use the @theme/CodeBlock component to get the same output.

import CodeBlock from '@theme/CodeBlock';

export default function MyReactPage() {
  return (
    <div>
      <CodeBlock
        language="jsx"
        title="/src/components/HelloCodeTitle.js"
        showLineNumbers>
        {`function HelloCodeTitle(props) {
  return <h1>Hello, {props.name}</h1>;
}`}
      </CodeBlock>
    </div>
  );
}

Output:

http://localhost:3000
/src/components/HelloCodeTitle.js
function HelloCodeTitle(props) {  return <h1>Hello, {props.name}</h1>;}

You can see the code block in action outside of markdown file.

The props accepted are language, title and showLineNumbers, in the same way as you write Markdown code blocks. Although discouraged, you can also pass in a metastring prop like metastring='{1-2} title="/src/components/HelloCodeTitle.js" showLineNumbers', which is how Markdown code blocks are handled under the hood. However, we recommend you use comments for highlighting lines.

Change output code​

You can not only show the data directly, but also process it. For example, this code removes lines that start with a comment.

```mdx-code-block
import CodeBlock from '@theme/CodeBlock';

<CodeBlock className="language-js" title="sidebars.js">
  {require('!!raw-loader!@site/sidebars.js')
    .default
    .split('\n')
    // remove comments
    .map((line) => !['//','/*','*'].some(commentPattern => line.trim().startsWith(commentPattern)) && line)
    .filter(Boolean)
    .join('\n')}
</CodeBlock>
```;

You should see your sidebar.js file:

http://localhost:3000
sidebars.js
module.exports = {
  Docs: [
    {
      type: 'link',
      label: 'ThreePhotos',
      href: '/threePhotos',
    },
    {
      type: 'autogenerated',
      dirName: '.', // '.' means the current docs folder
    },
  ],
};