Forum Discussion
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 Rise course for ease of access. I use this to create code blocks that I use frequently (flip cards, accordions, infographic cards etc). They are able to be customised far more than the standard Rise blocks. There's a user guide built in. I'll be updating and adding to this as my needs require. Would be great to get some feedback or ideas for improvements.
8 Replies
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.
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>
This is a great tool and thank you so much for sharing. I was able to access this last week with no issue, however, today when I attempted to open it, it's requiring a password. Can you provide me with the password, please?
Hi Jennifer, please follow the new link in the original post.
Great! Thank you so much! The new link is working.
This is a fantastic resource. Thank you so much for sharing it!
Thank you for sharing. This is really helpful.
New UX/UI version created with much greater functionality
