Support horizontal layout in code and output boilerplates

[yucheng11122017]

What is the purpose of this pull request?

• Documentation update
• Bug fix
• Feature addition or enhancement
• Code maintenance
• DevOps
• Improve developer experience
• Others, please explain:

Contributes to #572

Overview of changes:
Standardize usage of codeAndOutput.md boilerplate in UG
Change boilerplate for codeAndOutput.md, codeAndOutputCode.md and codeAndOutputSeperate.md to allow horizontal layout.

<include src="codeAndOutput.md">
<variable name="horizontal" />
<variable name="code">
**Things to do:**

- [x] Finish my changes
- [ ] Push my commits to GitHub
- [ ] Open a pull request
</variable>
</include>

Before:

After:

Anything you'd like to highlight/discuss:

Testing instructions:

Proposed commit message: (wrap lines at 72 characters)
Support horizontal layout in code and output boilerplates

---

Checklist: ☑️

• Updated the documentation for feature additions and enhancements
• Added tests for bug fixes or features
• Linked all related issues
• No unrelated changes

[lhw-1]

Good find & fix @yucheng11122017!

The changes look good to me, and I couldn't find any related issues / PRs for why we were using the arrows instead of the boilerplate, so LGTM :)

[itsyme]

Great work with the PR! I think this is good for the user guide as it creates consistency when reading it! LGTM!

[tlylt]

Thank you @yucheng11122017 for raising this.
For context, this is likely related to #572

My suggestion as seen in that issue:

#572 (comment)
I can see the usefulness of having a horizontal layout for code and output, perhaps best if it is responsive by default (horizontal when the screen is wide enough, and vertical when viewed on a phone). This could also reduce the possibility of having users experience the ill-formatted table issue in #2025.

if working together with the support for more advanced features for code-block in #1496, then might be preferable to develop it as a vue-component. Else, plugin is likely to be fine for simple syntax sugar implementation.

Regarding the specific issue of formatting in this PR, I think the first code example **Things to do:** is suitable to stay as is and the second one can be adjusted (due to width differences).

For a start, I think it would be good to create a nunjucks boilerplate that simplifies the creation of code-and-output-horizontal style code blocks. This is for our internal usage in our docs (or if it works well, we can add instructions on how to do so in our user guide). Then if you are interested, we can look at making this feature more accessible via a plugin or a standalone component.

What do you think?

[yucheng11122017]

Hi @tlylt thanks for your comments.
I agree it would be good to support horizontal layouts.
I think it might be better to modify the existing boilerplate to allow horizontal layout instead though. So users can include a variable horizontal to get a horizontal layout.

Eg.

<include src="codeAndOutput.md" boilerplate>
<variable name="horizontal" />
<variable name="code">
Euler's Identity \(e^{i\pi}+1=0\) is a beautiful formula.
</variable>
</include>

Is that ok? If yes, I will proceed to modify the other codeAndOutputCode.md boilerplate and update the formatting in index.md

[tlylt]

Hi @tlylt thanks for your comments. I agree it would be good to support horizontal layouts. I think it might be better to modify the existing boilerplate to allow horizontal layout instead though. So users can include a variable horizontal to get a horizontal layout.

Eg.

<include src="codeAndOutput.md" boilerplate>
<variable name="horizontal" />
<variable name="code">
Euler's Identity \(e^{i\pi}+1=0\) is a beautiful formula.
</variable>
</include>

Is that ok? If yes, I will proceed to modify the other codeAndOutputCode.md boilerplate and update the formatting in index.md

Sure go ahead.

[EltonGohJH]

LGTM 👍