6

When using colored note boxes in jupyter notebooks, the following text cell is not correctly rendered in Google Colab:

<div class="alert alert-block alert-info">
<b>Tip: </b>
Use blue boxes for Tips and notes. If it’s a note, you don’t have to include the word “Note”. 
</div>
DaniTeba
  • 220
  • 2
  • 6
  • 3
    Wow, I google my own question. I was using this to review the submisions of my pupils. Is there another way to clearly add revisions to a jupyter notebook? – DaniTeba Feb 06 '21 at 12:14

1 Answers1

2

You can try to run this on Colab instead. Don't forget to use the magic line %%html. I just modified the code of @user2304916 from here.

%%html
<style>
div.warn {    
    color: #356A89;
    background-color: #D4EAF7;
    border-left: 5px solid #3C82E3;
    padding: 0.5em;
    }
 </style>
<div class=warn>
Use blue boxes (alert-info) for tips and notes. 
If it’s a note, you don’t have to include the word “Note”.
</div>


<style>
div.warn {    
    color: #356A89;
    background-color: #D4EAF7;
    border-left: 5px solid #3C82E3;
    padding: 0.5em;
    }
 </style>
<div class=warn>
Use blue boxes (alert-info) for tips and notes. 
If it’s a note, you don’t have to include the word “Note”.
</div>
ワタル
  • 21
  • 3
  • 1
    So you have to do that in every cell where you want this to happen? That is really inconvenient. – eric Aug 27 '23 at 20:32
  • As a note - this seems to work in Colab by putting the HTML into a *code* chunk and running it, then hiding the output. – N Brouwer Sep 02 '23 at 21:14