-
Notifications
You must be signed in to change notification settings - Fork 124
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to show code and output side-by-side? #572
Comments
Bootstrap's grid system? |
In this specific case it doesn't seem to work -- apparently due to how the parser interprets blank lines. |
This works: <div class="container">
<div class="row">
<div class="col">
```python
price = 55
print(price)
if price > 50:
print('Expensive')
weight = 45
print(weight)
if weight > 100:
print('Heavy')
print('Done')
```
<span></span><!-- Don't treat HTML starting with 4 spaces on the next line as code -->
</div>
<div class="col-1">
→
</div>
<div class="col">
```
50
Expensive
45
Done
```
<span></span>
</div>
</div>
</div> |
Nice. Thanks for the solution @acjh As this is a layout our target audience could be using frequently, I can imagine providing a component for it with a simpler syntax. e.g., <columns>
```python
price = 55
print(price)
if price > 50:
print('Expensive')
weight = 45
print(weight)
if weight > 100:
print('Heavy')
print('Done')
` ` `
|----------------
→
|----------------
` ` `
50
Expensive
45
Done
` ` `
</columns> What do you think? |
Yes, that looks simpler. The syntax can quickly get complex though. Notice the This kind of "transformation" syntax can probably be developed as a plugin (#470), rather than a functional (Vue) component. We might want to consider how a non-MarkBind system (e.g. GitHub) renders it: price = 55
print(price)
if price > 50:
print('Expensive')
weight = 45
print(weight)
if weight > 100:
print('Heavy')
print('Done') |----------------
Exploring an alternativeMultiMarkdown table syntax (markdown-it-multimd-table) looks better in code: Input | | Output
------------------- | -- |-------------
```python | → | ```
price = 55 | | 50
print(price) | | Expensive
if price > 50: | | 45
print('Expensive') | | Done
| | ```
weight = 45 | |
print(weight) | |
if weight > 100: | |
print('Heavy') | |
| |
print('Done') | |
``` | | But are a horror to copy-paste (and format) non-rendered code. Also, how GitHub renders it:
weight = 45 | |
|
Yes, that works too.
Yes, it is nice if the syntax is compatible with markdown viewers; In practice though, I've come to rely on markbind live preview or netlify preview and not use any markdown viewers.
That's true. Our syntax can be optimized for a common use case, possibly with options to configure for a few other common use cases. For other cases, we can advise users to use Bootstrap grid syntax with a warning about its gotchas. |
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. |
Hi! Can this issue be closed with #2194? |
@yucheng11122017 Per second part of my reply in #2194 (comment) the solution you implemented is only available internally? (cmiiw) External users may not be aware of how to achieve this so there's still value in either documenting or providing a convenient syntax via plugin for this. |
Right - this boilerplate is currently only used for our documentation. In that case, would it make sense to include some default boilerplates when calling init which includes some of these boilerplates? |
My preference would be either documentation of how to do it via boilerplates or make a plugin for this particular issue.
|
Introducing an easy syntax that says 'stack horizontally when there is space, overflow to next line if no space' seems like a more user-friendly solution, for both authors and readers. For situation that don't fit that mechanism, users can fallback on boilerplates (there is a usability rule-of-thumb: common things must be easy to do, rare things must be possible to do). As a side benefit: this feature can help to reduce the page count (and wasted space) when converting a document to PDF format. |
In that case, would it be very similiar to the bootstrap grid system? |
Possibly a simpler version of it (less flexible, but easier to use). |
Take the following text.
How can I use MarkBind to show the text in a horizontal layout, as given below? I know it can be done using a borderless table, is there a more elegant way?
code → output
The text was updated successfully, but these errors were encountered: