1

I'm a total beginner, just starting to get familiar with html, css and other stuff.

I just tried creating a code block using w3.css. They have this pretty w3-code thing I used for putting Python code as an example. It looks good but I also need to highlight the syntax. I tried using w3codecolor.js as suggested but unfortunately it doesn't do the thing. Why? I can clearly see a Python mode in the library, but it isn't listed as a class in the tutorial.

Here is my code:

<head>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <script src="https://www.w3schools.com/lib/w3codecolor.js"></script>
</head>


<div id="myDiv">
<div class="w3-panel w3-card w3-light-grey">
  <h3>Example code, oh yeah baby</h3>
  <div class="w3-code pythonHigh">
<pre><code>df = pd.read_csv('UCI_Credit_Card.csv')

def valuation_formula(limit):
    if limit<=10000.: 
        return 'A'
    elif limit<=100000. and limit>10000.:
        return 'B'
    elif limit<=200000. and limit>100000.:
        return 'C'
    elif limit<=400000. and limit>200000.:
        return 'D'
    elif limit<=700000. and limit>400000.:
        return 'E'
    else:
        return 'F'

              
df['NEW_COLUMN'] = df.apply(lambda row: valuation_formula(row['LIMIT_BAL']), axis=1)
df.head(10)
</code></pre>
  </div>
</div>
<script>
w3CodeColor(document.getElementById("myDiv"));
</script>

It actually does some coloring but it clearly isn't alike to one I can see in Jupyter Notebook which I use for Python coding (this is what I'm trying to achieve).

P.S. - As you can see there is not many regular html tags, because I'm doing this whole thing on EdX platform, which could be the case but I have no clue. Here, this is how it looks like: screenshot

halfer
  • 19,824
  • 17
  • 99
  • 186
Freddiellow
  • 11
  • 1
  • 1
    Your kind of at the mercy of the script. There's only so many predefined colors in the library you linked. If you want something more flexible you should alter the script to your needs or find another library that suits your project – soulshined May 22 '18 at 19:49

0 Answers0