|
4 | 4 | <meta charset="utf-8">
|
5 | 5 | <meta name="description" content="">
|
6 | 6 | <meta name="viewport" content="width=device-width, initial-scale=1">
|
7 |
| - <title>Scribbler - a codding landing page template for codrops</title> |
| 7 | + <title>PyPrez | Run Python codesnippets in the the browser. Embed runnable answers in Stack Overflow or your webpage.</title> |
8 | 8 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
9 | 9 | <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800,900" rel="stylesheet">
|
10 | 10 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/railscasts.min.css">
|
11 | 11 | <link rel="stylesheet" href="scribbler-global.css">
|
12 | 12 | <link rel="stylesheet" href="scribbler-landing.css">
|
13 | 13 | <link rel="author" href="humans.txt">
|
| 14 | + <script src="https://modularizer.github.io/pyprez/pyprez.js"></script> |
14 | 15 | </head>
|
15 | 16 | <body>
|
16 | 17 | <nav>
|
|
22 | 23 | </ul>
|
23 | 24 | </nav>
|
24 | 25 | <div class="hero">
|
25 |
| - <h1 class="hero__title">Scribbler</h1> |
26 |
| - <p class="hero__description">Take your markdown notes in terminal</p> |
27 |
| - </div> |
28 |
| - <div class="hero__terminal"> |
29 |
| - <pre> |
30 |
| - <!-- Place your demo code here --> |
31 |
| - <code class="shell-session demo">hyperyolo ~ $ </code> |
32 |
| - </pre> |
| 26 | + <h1 class="hero__title">PyPrez</h1> |
| 27 | + <p class="hero__description">Present your Python with runnable and editable code snippets</p> |
| 28 | +<!-- </div>--> |
| 29 | + <pyprez-editor theme="darcula" style="margin:0 auto;text-align:left" runonload="true"> |
| 30 | +#!/usr/bin/env python |
| 31 | +import numpy as np |
| 32 | +x = np.random.rand(4) |
| 33 | + |
| 34 | +if __name__ == "__main__": |
| 35 | + print(f"{x=}") |
| 36 | + </pyprez-editor> |
33 | 37 | </div>
|
34 | 38 | <div class="wrapper">
|
35 | 39 | <div class="installation">
|
36 |
| - <h3 class="section__title">Installation</h3> |
| 40 | + <h3 class="section__title">Import</h3> |
37 | 41 | <div class="tab__container">
|
38 | 42 | <ul class="tab__menu">
|
39 |
| - <li class="tab active" data-tab="mac">mac</li> |
40 |
| - <li class="tab" data-tab="linux">linux</li> |
41 |
| - <li class="tab" data-tab="win">win</li> |
| 43 | + <li class="tab active" data-tab="linux">HTML</li> |
| 44 | + <li class="tab" data-tab="win">Install Locally</li> |
42 | 45 | </ul>
|
43 | 46 | <pre class="nohighlight code">
|
44 |
| - <code class="tab__pane active mac">$ brew install scribbler</code> |
45 |
| - <code class="tab__pane linux">$ apt-get install scribbler</code> |
46 |
| - <code class="tab__pane win">$ gem install scribbler</code> |
| 47 | + <code class="tab__pane active linux"><script src="https://github.com/modularizer/pyprez/pyprez.min.js"></script></code> |
| 48 | + <code class="tab__pane win">git clone https://github.com/modularizer/pyprez.git</code> |
47 | 49 | </pre>
|
48 | 50 | </div>
|
49 | 51 | </div>
|
50 | 52 | <div class="feature">
|
51 | 53 | <div class="feature__item">
|
52 |
| - <h3 class="section__title">Fast & Light</h3> |
53 |
| - <p>Start writing your notes immediately in any terminal! No more time wasted on navigating and opening your text editor.</p> |
| 54 | + <h3 class="section__title">No Installation</h3> |
| 55 | + <p>PyPrez is a javascript library which gets loaded when the webpage loads, meaning no installation |
| 56 | + is necessary to developers or users</p> |
54 | 57 | </div>
|
55 | 58 | <div class="feature__item">
|
56 |
| - <h3 class="section__title">File Syncing</h3> |
57 |
| - <p>Save your file in Dropbox then you can access to it from anywhere.</p> |
| 59 | + <h3 class="section__title">No Server Needed</h3> |
| 60 | + <p>Can be used in any HTML document! No server needed (aside from the file server to serve HTML/JS file)</p> |
58 | 61 | </div>
|
59 | 62 | <div class="feature__item">
|
60 |
| - <h3 class="section__title">Secure</h3> |
61 |
| - <p>Encrypt your notes optionally. No one can get to your secrets! </p> |
| 63 | + <h3 class="section__title">Edit & Try Again</h3> |
| 64 | + <p>Tinker with your code until you get it to work. Editor doubles a Python Console after it is run.</p> |
62 | 65 | </div>
|
63 | 66 | <div class="feature__item">
|
64 |
| - <h3 class="section__title">Configuration</h3> |
65 |
| - <p>Maintain all your settings in a single <span class="code code--inline">config.json</span> file. Never need to redo the setting every single time jotting down a note.</p> |
| 67 | + <h3 class="section__title">Use On Stack Overflow</h3> |
| 68 | + <p>Embed runnable code snippets into your answers. <a>Instructions</a>, <a>Samples</a></p> |
66 | 69 | </div>
|
67 | 70 | <div class="feature__item">
|
68 |
| - <h3 class="section__title">Highlightings</h3> |
69 |
| - <p>For better readability, scribbler has a clean, beautiful color scheme allow you to scan files fast.</p> |
| 71 | + <h3 class="section__title">Customize</h3> |
| 72 | + <p>Choose from darkmode, light mode, or more!</p> |
70 | 73 | </div>
|
71 | 74 | <div class="feature__item">
|
72 | 75 | <h3 class="section__title">Keybindings</h3>
|
73 |
| - <p>You can expect common keybindings for scribbler. Customize <span class="code code--inline">bindings.json</span> for your own liking! </p> |
| 76 | + <p>You can expect common keybindings in the editor, plus a few extra!</p> |
74 | 77 | </div>
|
75 | 78 | </div>
|
76 | 79 | <div class="keybinding">
|
77 | 80 | <ul class="keybinding__detail">
|
78 | 81 | <h3 class="keybinding__title">Default Keybindings</h3>
|
79 |
| - <li>Quit without saving <span class="keybinding__label">Ctrl+C</span></li> |
80 |
| - <li>Save <span class="keybinding__label">Cmd+S</span></li> |
81 |
| - <li>Save and Quit <span class="keybinding__label">Ctrl+D</span></li> |
| 82 | + <li>Select All <span class="keybinding__label">Ctrl+A</span></li> |
| 83 | + <li>Copy Selected <span class="keybinding__label">Cmd+C</span></li> |
| 84 | + <li>Paste <span class="keybinding__label">Ctrl+V</span></li> |
82 | 85 | <li>Undo <span class="keybinding__label">Cmd+Z</span></li>
|
83 | 86 | </ul>
|
84 | 87 | <ul class="keybinding__detail">
|
85 |
| - <h3 class="keybinding__title">Markdown Keybindings</h3> |
86 |
| - <li><span class="keybinding__label">Ctrl+A</span> Insert Link Markdown</li> |
87 |
| - <li><span class="keybinding__label">Ctrl+I</span> Insert Image Markdown</li> |
88 |
| - <li><span class="keybinding__label">Ctrl+V</span> Insert YouTube Video</li> |
89 |
| - <li><span class="keybinding__label">Ctrl+T</span> Insert Table</li> |
| 88 | + <h3 class="keybinding__title">Special Keybindings</h3> |
| 89 | + <li><span class="keybinding__label">Shift+Enter</span> Run Code</li> |
| 90 | + <li><span class="keybinding__label">Shift + Backspace</span> Reset Code</li> |
90 | 91 | </ul>
|
91 | 92 | </div>
|
92 | 93 | <div class="callout">
|
|
0 commit comments