Skip to content

Commit 6f8b0ef

Browse files
Aksh77Aksh77
committed
added syntax-highlighter for text-editor
1 parent b7b3916 commit 6f8b0ef

File tree

3 files changed

+254
-0
lines changed

3 files changed

+254
-0
lines changed

‎blog/texteditor/prism.css

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+java+python&plugins=toolbar+highlight-keywords+copy-to-clipboard */
2+
/**
3+
* prism.js default theme for JavaScript, CSS and HTML
4+
* Based on dabblet (http://dabblet.com)
5+
* @author Lea Verou
6+
*/
7+
8+
code[class*="language-"],
9+
pre[class*="language-"] {
10+
color: black;
11+
background: none;
12+
text-shadow: 0 1px white;
13+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
14+
text-align: left;
15+
white-space: pre;
16+
word-spacing: normal;
17+
word-break: normal;
18+
word-wrap: normal;
19+
line-height: 1.5;
20+
21+
-moz-tab-size: 4;
22+
-o-tab-size: 4;
23+
tab-size: 4;
24+
25+
-webkit-hyphens: none;
26+
-moz-hyphens: none;
27+
-ms-hyphens: none;
28+
hyphens: none;
29+
}
30+
31+
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
32+
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
33+
text-shadow: none;
34+
background: #b3d4fc;
35+
}
36+
37+
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
38+
code[class*="language-"]::selection, code[class*="language-"] ::selection {
39+
text-shadow: none;
40+
background: #b3d4fc;
41+
}
42+
43+
@media print {
44+
code[class*="language-"],
45+
pre[class*="language-"] {
46+
text-shadow: none;
47+
}
48+
}
49+
50+
/* Code blocks */
51+
pre[class*="language-"] {
52+
padding: 1em;
53+
margin: .5em 0;
54+
overflow: auto;
55+
}
56+
57+
:not(pre) > code[class*="language-"],
58+
pre[class*="language-"] {
59+
background: #f5f2f0;
60+
}
61+
62+
/* Inline code */
63+
:not(pre) > code[class*="language-"] {
64+
padding: .1em;
65+
border-radius: .3em;
66+
white-space: normal;
67+
}
68+
69+
.token.comment,
70+
.token.prolog,
71+
.token.doctype,
72+
.token.cdata {
73+
color: slategray;
74+
}
75+
76+
.token.punctuation {
77+
color: #999;
78+
}
79+
80+
.namespace {
81+
opacity: .7;
82+
}
83+
84+
.token.property,
85+
.token.tag,
86+
.token.boolean,
87+
.token.number,
88+
.token.constant,
89+
.token.symbol,
90+
.token.deleted {
91+
color: #905;
92+
}
93+
94+
.token.selector,
95+
.token.attr-name,
96+
.token.string,
97+
.token.char,
98+
.token.builtin,
99+
.token.inserted {
100+
color: #690;
101+
}
102+
103+
.token.operator,
104+
.token.entity,
105+
.token.url,
106+
.language-css .token.string,
107+
.style .token.string {
108+
color: #a67f59;
109+
background: hsla(0, 0%, 100%, .5);
110+
}
111+
112+
.token.atrule,
113+
.token.attr-value,
114+
.token.keyword {
115+
color: #07a;
116+
}
117+
118+
.token.function {
119+
color: #DD4A68;
120+
}
121+
122+
.token.regex,
123+
.token.important,
124+
.token.variable {
125+
color: #e90;
126+
}
127+
128+
.token.important,
129+
.token.bold {
130+
font-weight: bold;
131+
}
132+
.token.italic {
133+
font-style: italic;
134+
}
135+
136+
.token.entity {
137+
cursor: help;
138+
}
139+
140+
pre.code-toolbar {
141+
position: relative;
142+
}
143+
144+
pre.code-toolbar > .toolbar {
145+
position: absolute;
146+
top: .3em;
147+
right: .2em;
148+
transition: opacity 0.3s ease-in-out;
149+
opacity: 0;
150+
}
151+
152+
pre.code-toolbar:hover > .toolbar {
153+
opacity: 1;
154+
}
155+
156+
pre.code-toolbar > .toolbar .toolbar-item {
157+
display: inline-block;
158+
}
159+
160+
pre.code-toolbar > .toolbar a {
161+
cursor: pointer;
162+
}
163+
164+
pre.code-toolbar > .toolbar button {
165+
background: none;
166+
border: 0;
167+
color: inherit;
168+
font: inherit;
169+
line-height: normal;
170+
overflow: visible;
171+
padding: 0;
172+
-webkit-user-select: none; /* for button */
173+
-moz-user-select: none;
174+
-ms-user-select: none;
175+
}
176+
177+
pre.code-toolbar > .toolbar a,
178+
pre.code-toolbar > .toolbar button,
179+
pre.code-toolbar > .toolbar span {
180+
color: #bbb;
181+
font-size: .8em;
182+
padding: 0 .5em;
183+
background: #f5f2f0;
184+
background: rgba(224, 224, 224, 0.2);
185+
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
186+
border-radius: .5em;
187+
}
188+
189+
pre.code-toolbar > .toolbar a:hover,
190+
pre.code-toolbar > .toolbar a:focus,
191+
pre.code-toolbar > .toolbar button:hover,
192+
pre.code-toolbar > .toolbar button:focus,
193+
pre.code-toolbar > .toolbar span:hover,
194+
pre.code-toolbar > .toolbar span:focus {
195+
color: inherit;
196+
text-decoration: none;
197+
}
198+

‎blog/texteditor/prism.js

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎blog/texteditor/submitPost.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script src='https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=kgiblty5amr904k4x8fofyo831orwe8z572sj9m9w7ojzimn'></script>
5+
6+
<link rel="stylesheet" type="text/css" href="prism.css">
7+
<script src="prism.js"></script>
8+
9+
<script>
10+
tinymce.init({
11+
selector: '#mytextarea',
12+
plugins: ['emoticons', 'image', 'codesample', 'advlist autolink lists link image charmap print preview anchor',
13+
'searchreplace visualblocks code fullscreen',
14+
'insertdatetime media table contextmenu paste code'],
15+
menubar :['insert'],
16+
toolbar: 'undo redo | emoticons | codesample | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
17+
});
18+
</script>
19+
</head>
20+
21+
<body>
22+
<div class="container">
23+
<div class="row justify-content-center">
24+
<div class="col-10 col-md-6">
25+
<form action="https://formspree.io/aksh@ritcreativeteam.ml" method="POST">
26+
<br style="clear:both">
27+
<h1 style="margin-bottom: 25px; text-align: left;">Write a post !</h1>
28+
<div class="form-group">
29+
<input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
30+
</div>
31+
<div class="form-group">
32+
<input type="email" class="form-control" id="email" name="_replyto" placeholder="Email" required>
33+
</div>
34+
<br>
35+
<div class="form-group">
36+
<textarea class="form-control" type="textarea" name="message" id="mytextarea" placeholder="Type here" maxlength="140" rows="7"></textarea>
37+
</div>
38+
<br>
39+
<button type="submit" id="submit" name="submit" value="Send" class="btn btn-primary pull-right">Submit</button>
40+
</form>
41+
</div>
42+
</div>
43+
</div>
44+
</body>
45+
</html>

0 commit comments

Comments
 (0)