Search code examples
pythonhtmlmarkdown

python code inside details tag in markdown


Hi I am using jupyter notebooks in sphinx to create documentation. Below is the code, i want to toggle for hide/show using details tag in a markdown cell.


<details>
  <summary><font size="4" color="darkred"><b>My Solution</b></font></summary>
      ```python 
      import math
      %matplotlib inline 
      plt.xlabel('Area of triangle')    
      ```
</details>


The resulant snippet doesn't reflect python highlighting on execution (I don't intend to run the python code, it is just to hide and show)


Solution

  • Point1: There need to be an linebreak, i.e. an empty line after <summary> line

    Point 2: The second problem is the indentation. I don't know why, but when I used less than 4 white spaces to indent the python '''python line, it worked.

    <details>
      <summary><font size="4" color="darkred"><b>My Solution</b></font></summary>
        
      ```python
          import math
          %matplotlib inline 
          plt.xlabel('Area of triangle')
      ```
    </details>
    

    To use details tag with nested hide/show containing python blocks

    <details>
      <summary><font size="4" color="darkred"><b>My Solution</b></font></summary>
        
      ```python
          import math
          %matplotlib inline 
          plt.xlabel('Area of triangle')
      ```
    
      <details>
        <summary><font size="2" color="Blue"><b>See hints</b></font></summary>
        
      ```python
          import math
          %matplotlib inline 
          plt.xlabel('Area of triangle')
      ```
        
      </details>
    
        
    </details>
    
        
    
    
    

    I am adding the image of the corrections below:Correct code