Forum Discussion

DShaw's avatar
DShaw
Community Member
3 months ago

Code Block Creator Tool

Hey everyone, I've created a Rise code block creator tool with a user friendly UI that means you don't need to learn code or battle with AI prompts to create your own code blocks. Its built into a ...
AndrewBlemings-'s avatar
AndrewBlemings-
Community Member
3 days ago

Is there a way to create a stylized code block like this?:

// Comment
function foo() {
        return bar;
}

I have a Rise course interested in leveraging seven or eight of these.

DShaw's avatar
DShaw
Community Member
3 days ago

You can use this code. Comments are in the code that detail how to make adjustments

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  body { margin: 0; background: transparent; }

  /* ===== THE CARD ===== */
  .code {
    /* WIDTH: change 520px to make the card wider or narrower.
       Delete this line to make it full width. */
    max-width: 520px;
    box-sizing: border-box;

    /* ALIGNMENT: pick one.
       0 auto   = centred
       0        = left (default)
       0 0 0 auto = right */
    margin: 0 auto;

    /* COLOURS: card background and border */
    background: #f0f0f0;
    border: 1px solid #d4d4d4;

    /* CORNER ROUNDING: 0 for square corners */
    border-radius: 6px;

    /* PADDING: space inside the card (top/bottom left/right) */
    padding: 24px 20px;

    /* FONT: first one found on the reader's device is used */
    font-family: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* TEXT SIZE and LINE SPACING: 16px is the reference; 14px for compact */
    font-size: 16px;
    line-height: 1.7;

    /* DEFAULT TEXT COLOUR (anything without a colour class) */
    color: #222;

    overflow-x: auto;
    counter-reset: line;
  }

  /* ===== LINES AND LINE NUMBERS (no need to edit) ===== */
  .code .line {
    display: block;
    white-space: pre;
  }
  .code .line::before {
    counter-increment: line;
    content: counter(line);
    width: 2ch;              /* widen to 3ch if the block has 100+ lines */
    margin-right: 14px;      /* gap between the gutter line and the code */
    padding-right: 12px;     /* gap between the number and the gutter line */
    border-right: 2px solid #b5b5b5;   /* gutter line colour and thickness */
    text-align: right;
    color: #9a9a9a;          /* line number colour */
    display: inline-block;
  }

  /* ===== SYNTAX COLOURS: wrap words in <span class="..."> below ===== */
  .c { color: #7a7f8a; }   /* c = comment */
  .k { color: #2a6db5; }   /* k = keyword (function, return, if, const...) */
  .f { color: #c8313b; }   /* f = function name */
  .p { color: #666; }      /* p = punctuation (brackets, semicolons) */
</style>
</head>
<body>

<!-- ===== THE CODE =====
     One <div class="line"> per line. Line numbers are added automatically.
     Indent with ordinary spaces inside the line; they are preserved.
     Use <span class="k">, <span class="f"> etc. to colour words.
     HTML characters must be escaped: <  becomes  <   >  becomes  >   &  becomes  &
-->
<div class="code">
<div class="line"><span class="c">// Comment</span></div>
<div class="line"><span class="k">function</span> <span class="f">foo</span><span class="p">() {</span></div>
<div class="line">        <span class="k">return</span> bar<span class="p">;</span></div>
<div class="line"><span class="p">}</span></div>
</div>

</body>
</html>