Forum Discussion

DShaw's avatar
DShaw
Community Member
4 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
27 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
26 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>