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.

[yucheng11122017]

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?

[tlylt]

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.
For including default boilerplates, I would suggest to have a separate issue to discuss before proceeding:

• what default boilerplates are suitable to include?
• any change to the syntax?
• should we provide the ability to opt out?
• how maintainable will they be? Is it easy to migrate/make changes/keep them backward compatible?
• will it cause any conflicts with user-defined boilerplates?
• and more

[damithc]

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.

[yucheng11122017]

Hi @tlylt, @lhw-1 and I were discussing and we think a plugin would work best. It can be a natural extension to our current codeWrapBlockButton and codeCopyBlockButton

[tlylt]

Hi @tlylt, @lhw-1 and I were discussing and we think a plugin would work best. It can be a natural extension to our current codeWrapBlockButton and codeCopyBlockButton

👍

[damithc]

Hi @tlylt, @lhw-1 and I were discussing and we think a plugin would work best. It can be a natural extension to our current codeWrapBlockButton and codeCopyBlockButton

Should we think this as a code-related feature, or make it a more general show-side-by-side (or stack-horizontally) feature?

[yucheng11122017]

Should we think this as a code-related feature, or make it a more general show-side-by-side (or stack-horizontally) feature?

In that case, would it be very similiar to the bootstrap grid system?

[damithc]

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