docs Feature: optionally display line numbers in code blocks

Feature: optionally display line numbers in code blocks

Open snehankekre opened this issue 2 years ago • 0 comments

📚 Context

The docs can sometimes contain long code blocks. Authors may want to reference specific lines of the code block in preceding or subsequent paragraph text. Doing so without displayed line numbers can be challenging. To that end, this PR introduces a feature to optionally include line numbers in code blocks using the prism line numbers plugin. There are two ways to do:

If using fenced code blocks, include showLineNumbers to the right of ```python. E.g.

```python showLineNumbers
import streamlit as st

st.write("Hello, world!")
```

If using the <Code> component, set the prop showLineNumbers={true}. E.g.

<Code showLineNumbers={true}>
  <code className="language-python">
    {`
    import streamlit as st
    
    st.write("Hello, world!")
    `}
  </code>
</Code>

Since we use code blocks in many places in our docs, and some places where we might not want line numbers (API cards), line numbers are turned off by default.

🧠 Description of Changes

Added a showLineNumbers prop to code.js that, if set by the author, shows line numbers in the <pre> preceding the <code>
Added a styles to styles/text.scss to hide the vertical border to the right of line numbers
Temporarily added two examples of this behavior in chat elements tutorial: https://deploy-preview-799--streamlit-docs.netlify.app/knowledge-base/tutorials/build-conversational-apps#stchat_message

Revised: