SoLive Doc: a Docusaurus Extension for SoLive

You can quickly integrate a lightweight Solidity Editor into your documentation using the solive-docusaurus-theme-code plugin. (Currently being improved)

Installation

1. First, we need to install the solive-docusaurus-theme-code plugin:

npm install --save solive-docusaurus-theme-code

2. Install some required dependencies for configuration (currently no better solution is available):

npm install -D stream-http https-browserify stream-browserify crypto-browserify stream-browserify path-browserify events os-browserify buffer url assert tty-browserify util browserify-zlib

3. Next, you need to configure the solive plugin in your docusaurus.config.js.

module.exports = {
  // ...
  themes: ['solive-docusaurus-theme-code'],
  // ...
};

Quick Start

1. To import SoLive in your document, you need to mark the Solidity code block with solive and its attributes:

  ```solidity solive height=500px
    // your code
  ```

2. You can configure solive attributes like height in the code block (refer to the Properties Table):

  ```solidity solive height=300px
    // your code
  ```

3. Configure the file name in the code block (supports multiple files), please note that duplicated file name in one page will result in error:

  ```solidity solive height=500px
    /**
     * @filename Storage.sol
     */

    // your code

    /**
     * @filename Storage2.sol
     */

    // your code
  ```

4. A complete SoLive code block example:

```solidity solive height=500px
/**
 * @filename Storage.sol
 */


// SPDX-License-Identifier: GPL-3.0

pragma solidity >=0.7.0 <0.9.0;

/**
 * @title Storage
 * @dev Store & retrieve value in a variable
 * @custom:dev-run-script ./scripts/deploy_with_ethers.ts
 */
contract Storage {

    uint256 number;

    /**
     * @dev Store value in variable
     * @param num value to store
     */
    function store(uint256 num) public {
        number = num;
    }

    /**
     * @dev Return value
     * @return value of 'number'
     */
    function retrieve() public view returns (uint256){
        return number;
    }
}
```

5. You will see:

  /**
   * @filename Storage.sol
   */

  // SPDX-License-Identifier: GPL-3.0

  pragma solidity >=0.7.0 <0.9.0;

  /**
   * @title Storage
   * @dev Store & retrieve value in a variable
   * @custom:dev-run-script ./scripts/deploy_with_ethers.ts
   */
  contract Storage {

      uint256 number;

      /**
       * @dev Store value in variable
       * @param num value to store
       */
      function store(uint256 num) public {
          number = num;
      }

      /**
       * @dev Return value
       * @return value of 'number'
       */
      function retrieve() public view returns (uint256){
          return number;
      }
  }