Search code examples
htmljupyter-notebookmarkdownauto-indent

markdown / html: keep indent for second line after colon

The task is to put text in colored blocks (background-color, padding, round corner, border-line, etc.). Within the block, on Example 2 Explanation, the second line should automatically keep the indents and align after the colon on the first line. The output I want is shown in the image below if my explanation isn't clear enough.

I'm writing in Jupiter notebook. Markdown syntax and html can be recognized. I'm not sure how to make css work?

I've seen some questions here very related but their answer doesn't work for me. Such as: How to keep indent for second line in ordered lists via CSS?

enter image description here

My attempt

The best I can do is shown below, however it has problems.

  1. I used <pre> tag which indents the entire block but I don't know how to remove. (No one on the internet seems to have this problem and I start to wonder if it's because I code on Jupiter notebook??)

  2. the second line of Explanation in Example 2 doesn't align after the colon on the first line.

This is an old problem and I pretty much gave up after several hours' attempt. Sorry for the late update.

enter image description here

<p><strong>Example 1:</strong></p>
<pre style="background-color:#F5F5F5; padding:10px; border:1px solid #CCCCCC; border-radius:5px;">
<strong>Input:</strong> "42"
<strong>Output:</strong> 42
</pre>

<p><strong>Example 2:</strong></p>
<pre style="background-color:#F5F5F5; padding:10px; border:1px solid #CCCCCC; border-radius:5px;">
<strong>Input:</strong> "   -42"
<strong>Output:</strong> -42
<strong>Explanation:</strong> The first non-whitespace character is '-', which is the minus sign. Then take as many numerical digits as possible, which gets 42.
</pre>
Solution

  • Use div tag in markdown inlinehtml.

    <div style="clear: both; display: table">
<div style="float: 100px; width: 100px; ">
<strong>Explanation: </strong>
</div> 
<div style="float: left; width: 500px;">
The first non-whitespace character is '-', which is the minus sign. Then take as many numerical digits as possible, which gets 42. 
</div>
</div>

    You might use definition list in html.

    <!DOCTYPE html>
<html>
<head>
<style>
dl {
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0
}
dt {
  float: left;
  clear: left;
  width: auto;
  /* adjust the width; make sure the total of both is 100% */
  padding: 0;
  margin: 0;
  font-weight: bold
}
dt::after {
  content: ":";
}
dd {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  padding: 0;
  margin: 0 0 0 10px;
}
</style>
</head>
<body>

<p>A dd element is displayed like this:</p>

<dl>
  <dt>Input</dt> 
  <dd> 42 </dd>

  <dt>Output</dt> 
  <dd> 42 </dd>

  <dt>Explanation</dt>
  <dd>The first non-whitespace character is '-', which is the minus sign. Then take as many numerical digits as possible, which gets 42.</dd>
</dl>

<p>Change the default CSS settings to see the effect.</p>

</body>
</html>