How to show code and output side-by-side?

[damithc]

Take the following text.

The code below has two `if` statements; one evaluates to `true` while the other doesn't.

price = 55
print(price)
if price > 50:
    print('Expensive')

weight = 45
print(weight)
if weight > 100:
    print('Heavy')
    
print('Done')

→

50
Expensive
45
Done

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

[acjh]

Bootstrap's grid system?
https://getbootstrap.com/docs/4.0/layout/grid/#auto-layout-columns

[damithc]

Bootstrap's grid system?
https://getbootstrap.com/docs/4.0/layout/grid/#auto-layout-columns

In this specific case it doesn't seem to work -- apparently due to how the parser interprets blank lines.

[acjh]

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>

Result:

[damithc]

Nice. Thanks for the solution @acjh
As the culprit was indentation, I used 1-space indentation within this specific block to avoid the problem (instead of the extra <span>).

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?

[acjh]

Yes, that looks simpler. The syntax can quickly get complex though. Notice the col-1 and cols, which assign 1 unit to the col-1 with just the arrow and split the remaining space equally between the cols.

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')

|----------------

→

50
Expensive
45
Done

Exploring an alternative

MultiMarkdown 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:

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') | |

[damithc]

This kind of "transformation" syntax can probably be developed as a plugin (#470), rather than a functional (Vue) component.

Yes, that works too.

We might want to consider how a non-MarkBind system (e.g. GitHub) renders it:

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.

The syntax can quickly get complex though. Notice the col-1 and cols, which assign 1 unit to the col-1 with just the arrow and split the remaining space equally between the cols.

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.

[tlylt]

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.

[yucheng11122017]

Hi! Can this issue be closed with #2194?
Users can use a similar boilerplate to generate this code and output side by side.

[tlylt]

Hi! Can this issue be closed with #2194?

Users can use a similar boilerplate to generate this code and output side by side.

@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.