Stylish

README.md

@@ -1,12 +1,28 @@
 # squip_notes
 
-! Work in progress !
-
 This is a *very* basic notes-taking program. It uses python with flask and pickle, to give a really light and simple web interface for note taking.
 
+It uses the [dracula](https://github.com/dracula/dracula-theme) colors.
+
 ![Screenshot of the application](./squipnotes.png)
 
+## Changing the code syntax highlight theme
+* Install pygmentyze (must be in your path): 
+```
+python3 pip install pygmentize
+```
+* List available themes in a python shell:
+```python
+from pygments.styles import STYLE_MAP
+print(STYLE_MAP.keys())
+```
+* Choose one, dracula for example
+* Generate the CSS from your bash/zsh/cmd... shell in a styles.css file:
+```bash
+pygmentize -S dracula -f html -a .codehilite > styles.css
+```
+* Replace all css for .codehilite in src/static/main.css with what's in styles.css
+
 ## Future features, todo
 * A squirrel ascii picture somewhere in the page :3
-* Less ugly colors and font
 * Better syntax coloring and markdown rendering in general

src/app.py

@@ -34,12 +34,13 @@ class note:
         """
         rendered = f"""
         <hr>
-        <div class="notetitle">{Markup.escape(self.title)}</div><br>
+        <div class="notetitle">{Markup.escape(self.title)}</div>
-        <div class="notetime">Created : {self.rendertime(self.createtime)} Modified : {self.rendertime(self.modtime)}</div><br>
-        <div class="notetext">{markdown.markdown(self.text)}</div><br>
         <form action="." method="GET" name="{self.createtime}">
-        <button type="submit" name="delete" value="{self.createtime}" class="delbutton">Delete this</button><button type="submit" name="edit" value="{self.createtime}" class="editbutton">Edit this</button>
+        <button type="submit" name="delete" value="{self.createtime}" class="delbutton">Delete</button>|<button type="submit" name="edit" value="{self.createtime}" class="editbutton">Edit</button>
-        </form><br>
+        </form>
+        <div class="notetime">Created : {self.rendertime(self.createtime)}
+        <br>Modified : {self.rendertime(self.modtime)}</div><br>
+        <div class="notetext">{markdown.markdown(self.text, extensions=['fenced_code', 'codehilite'])}</div><br>
         """
         return Markup(rendered)
 

src/requirements.txt

@@ -1,2 +1,3 @@
 flask>=2.0.3
 markdown>=3.3.5
+pygments>=2.11.2

src/static/styles/main.css

@@ -1,40 +1,177 @@
 html {
-	background-color: #393c42;
+	background-color: #22242e;
 	font-family: 'Source Sans Pro';
-	color: lightgrey;
+	color: #f8f8f2;
 }
 
 h1 {
-	color: green;
+	color: #50fa7b;
+}
+
+h2 {
+	color: #50fa7b;
+}
+
+h3 {
+	color: #50fa7b;
+}
+
+h4 {
+	color: #50fa7b;
+}
+
+h5 {
+	color: #50fa7b;
+}
+
+button {
+	background-color: #22242e;
+	border: none;
+	color: #8be9fd;
+	padding: 1px 2px;
+	text-align: left;
+	text-decoration: none;
+	display: inline-block;
+	font-size: 1em;
+	font-style: italic;
+	cursor: pointer;
+}
+
+.pagetitle {
+	font-size: 3em;
+	color: #ff79c6;
 }
 
 
 .notetitle {
-	color: green;
+	color: #ff79c6;
-	font-size: 1.5em;
+	font-size: 2em;
 }
 
 .notetime {
-	color: grey;
+	color: #6272a4;
 	font-style: italic;
 }
 
+/*
 .title {
-	background: black;
+	background: #44475a;
-	color: springgreen;
+	color: #50fa7b;
 	font-weight: bold;
-	border-radius: 5px;
+	font-size: 2em
+	border-style: none;
+	border-radius: 1px;
 	outline: none;
-	border-width: 2px;
+	border-width: 1px;
 }
+*/
 
 .text {
-	background: black;
+	background: #44475a;
-	color: beige;
+	color: #f8f8f2;
 	border-radius: 5px;
-	border-style: inset;
+	border-style: none;
 	outline: none;
-	border-width: 2px;
+	border-width: 1px;
 	height: 200px;
 	font-size: 15px;
+	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);
 }
+
+.title {
+	background: #44475a;
+	color: #f8f8f2;
+	border-radius: 5px;
+	border-style: none;
+	outline: none;
+	border-width: 1px;
+	height: 25px;
+	margin: 5px 0px 5px 0px;
+	font-size: 15px;
+	-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);
+}
+
+/* Syntax highlighting */
+pre { line-height: 125%; }
+td.linenos .normal { color: #f1fa8c; background-color: #44475a; padding-left: 5px; padding-right: 5px; }
+span.linenos { color: #f1fa8c; background-color: #44475a; padding-left: 5px; padding-right: 5px; }
+td.linenos .special { color: #50fa7b; background-color: #6272a4; padding-left: 5px; padding-right: 5px; }
+span.linenos.special { color: #50fa7b; background-color: #6272a4; padding-left: 5px; padding-right: 5px; }
+.codehilite .hll { background-color: #44475a }
+.codehilite { background: #282a36; color: #f8f8f2 }
+.codehilite .c { color: #6272a4 } /* Comment */
+.codehilite .err { color: #f8f8f2 } /* Error */
+.codehilite .g { color: #f8f8f2 } /* Generic */
+.codehilite .k { color: #ff79c6 } /* Keyword */
+.codehilite .l { color: #f8f8f2 } /* Literal */
+.codehilite .n { color: #f8f8f2 } /* Name */
+.codehilite .o { color: #ff79c6 } /* Operator */
+.codehilite .x { color: #f8f8f2 } /* Other */
+.codehilite .p { color: #f8f8f2 } /* Punctuation */
+.codehilite .ch { color: #6272a4 } /* Comment.Hashbang */
+.codehilite .cm { color: #6272a4 } /* Comment.Multiline */
+.codehilite .cp { color: #ff79c6 } /* Comment.Preproc */
+.codehilite .cpf { color: #6272a4 } /* Comment.PreprocFile */
+.codehilite .c1 { color: #6272a4 } /* Comment.Single */
+.codehilite .cs { color: #6272a4 } /* Comment.Special */
+.codehilite .gd { color: #8b080b } /* Generic.Deleted */
+.codehilite .ge { color: #f8f8f2; text-decoration: underline } /* Generic.Emph */
+.codehilite .gr { color: #f8f8f2 } /* Generic.Error */
+.codehilite .gh { color: #f8f8f2; font-weight: bold } /* Generic.Heading */
+.codehilite .gi { color: #f8f8f2; font-weight: bold } /* Generic.Inserted */
+.codehilite .go { color: #44475a } /* Generic.Output */
+.codehilite .gp { color: #f8f8f2 } /* Generic.Prompt */
+.codehilite .gs { color: #f8f8f2 } /* Generic.Strong */
+.codehilite .gu { color: #f8f8f2; font-weight: bold } /* Generic.Subheading */
+.codehilite .gt { color: #f8f8f2 } /* Generic.Traceback */
+.codehilite .kc { color: #ff79c6 } /* Keyword.Constant */
+.codehilite .kd { color: #8be9fd; font-style: italic } /* Keyword.Declaration */
+.codehilite .kn { color: #ff79c6 } /* Keyword.Namespace */
+.codehilite .kp { color: #ff79c6 } /* Keyword.Pseudo */
+.codehilite .kr { color: #ff79c6 } /* Keyword.Reserved */
+.codehilite .kt { color: #8be9fd } /* Keyword.Type */
+.codehilite .ld { color: #f8f8f2 } /* Literal.Date */
+.codehilite .m { color: #ffb86c } /* Literal.Number */
+.codehilite .s { color: #bd93f9 } /* Literal.String */
+.codehilite .na { color: #50fa7b } /* Name.Attribute */
+.codehilite .nb { color: #8be9fd; font-style: italic } /* Name.Builtin */
+.codehilite .nc { color: #50fa7b } /* Name.Class */
+.codehilite .no { color: #f8f8f2 } /* Name.Constant */
+.codehilite .nd { color: #f8f8f2 } /* Name.Decorator */
+.codehilite .ni { color: #f8f8f2 } /* Name.Entity */
+.codehilite .ne { color: #f8f8f2 } /* Name.Exception */
+.codehilite .nf { color: #50fa7b } /* Name.Function */
+.codehilite .nl { color: #8be9fd; font-style: italic } /* Name.Label */
+.codehilite .nn { color: #f8f8f2 } /* Name.Namespace */
+.codehilite .nx { color: #f8f8f2 } /* Name.Other */
+.codehilite .py { color: #f8f8f2 } /* Name.Property */
+.codehilite .nt { color: #ff79c6 } /* Name.Tag */
+.codehilite .nv { color: #8be9fd; font-style: italic } /* Name.Variable */
+.codehilite .ow { color: #ff79c6 } /* Operator.Word */
+.codehilite .w { color: #f8f8f2 } /* Text.Whitespace */
+.codehilite .mb { color: #ffb86c } /* Literal.Number.Bin */
+.codehilite .mf { color: #ffb86c } /* Literal.Number.Float */
+.codehilite .mh { color: #ffb86c } /* Literal.Number.Hex */
+.codehilite .mi { color: #ffb86c } /* Literal.Number.Integer */
+.codehilite .mo { color: #ffb86c } /* Literal.Number.Oct */
+.codehilite .sa { color: #bd93f9 } /* Literal.String.Affix */
+.codehilite .sb { color: #bd93f9 } /* Literal.String.Backtick */
+.codehilite .sc { color: #bd93f9 } /* Literal.String.Char */
+.codehilite .dl { color: #bd93f9 } /* Literal.String.Delimiter */
+.codehilite .sd { color: #bd93f9 } /* Literal.String.Doc */
+.codehilite .s2 { color: #bd93f9 } /* Literal.String.Double */
+.codehilite .se { color: #bd93f9 } /* Literal.String.Escape */
+.codehilite .sh { color: #bd93f9 } /* Literal.String.Heredoc */
+.codehilite .si { color: #bd93f9 } /* Literal.String.Interpol */
+.codehilite .sx { color: #bd93f9 } /* Literal.String.Other */
+.codehilite .sr { color: #bd93f9 } /* Literal.String.Regex */
+.codehilite .s1 { color: #bd93f9 } /* Literal.String.Single */
+.codehilite .ss { color: #bd93f9 } /* Literal.String.Symbol */
+.codehilite .bp { color: #f8f8f2; font-style: italic } /* Name.Builtin.Pseudo */
+.codehilite .fm { color: #50fa7b } /* Name.Function.Magic */
+.codehilite .vc { color: #8be9fd; font-style: italic } /* Name.Variable.Class */
+.codehilite .vg { color: #8be9fd; font-style: italic } /* Name.Variable.Global */
+.codehilite .vi { color: #8be9fd; font-style: italic } /* Name.Variable.Instance */
+.codehilite .vm { color: #8be9fd; font-style: italic } /* Name.Variable.Magic */
+.codehilite .il { color: #ffb86c } /* Literal.Number.Integer.Long */
+

src/templates/edit.html

@@ -7,12 +7,13 @@
 	</head>
 	<body>
 
-	<h1>$ ~/squip_notes</h3>
+	<h1 class="pagetitle">$ ~/squip_notes</h1>
 	<div class="div1">
 		<form action="." method="POST">
 			<textarea type="text" name="title" class="title">{{ ntitle }}</textarea><br>
-			<textarea type="text" name="text" rows = "5" cols = "60*" class="text">{{ ntext }}</textarea><br>
+			<textarea type="text" name="text" rows = "50" cols = "60*" class="text">{{ ntext }}</textarea><br>
 			<button type="submit" name="submit">OK</button>
+			<div class="notetime">Note : you can drag the textbox to make it bigger.</div>
 		</form>
 
 		You are editing {{ notenumber }} <br>

src/templates/homepage.html

@@ -7,12 +7,13 @@
 	</head>
 	<body>
 
-	<h1>$ ~/squip_notes</h3>
+	<h1 class="pagetitle">$ ~/squip_notes</h1>
 	<div class="div1">
 		<form action="." method="POST">
-			<input type="text" name="title" class="title"><br>
+			<input type="text" name="title" class="title" placeholder="Title"><br>
-			<textarea type="text" name="text" rows = "5" cols = "60*" class="text"></textarea><br>
+			<textarea type="text" name="text" rows = "5" cols = "60*" class="text" placeholder="Text"></textarea><br>
-			<button type="submit" name="submit">OK</button>
+			<button type="submit" name="submit">Post</button>
+			<div class="notetime">Note : you can drag the textbox to make it bigger.</div>
 		</form>
 		<br>
 	{{ nr }}