|
|
@@ -0,0 +1,49 @@
|
|
|
+<style>
|
|
|
+ .marker {
|
|
|
+ background-color: #ffff66;
|
|
|
+ }
|
|
|
+
|
|
|
+ .marker-green {
|
|
|
+ background-color: #66ff00;
|
|
|
+ }
|
|
|
+
|
|
|
+ .marker-pink {
|
|
|
+ background-color: #ff6fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pen-red {
|
|
|
+ background-color: transparent;
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pen-blue {
|
|
|
+ background-color: transparent;
|
|
|
+ color: #0000ff;
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
|
|
+<div id="editor">
|
|
|
+ <p>Lorem
|
|
|
+ <mark class="marker">ipsum dolor sit amet</mark>
|
|
|
+ , consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et <mark class="pen-red">dolore magna</mark> aliqua. Ut enim ad minim veniam, quis
|
|
|
+ nostrud exercitation ullamco
|
|
|
+ <mark class="pen-blue">laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
|
|
|
+ velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
|
|
+ </mark>
|
|
|
+ cupidatat non proident, sunt in culpa qui officia
|
|
|
+ deserunt mollit anim id est laborum.
|
|
|
+ </p>
|
|
|
+ <p>Lorem ipsum dolor sit amet, consectetur
|
|
|
+ <mark class="marker-green">adipiscing elit</mark>
|
|
|
+ , sed do eiusmod tempor incididunt ut labore et dolore magna
|
|
|
+ <mark>aliqua. Ut enim ad minim veniam</mark>
|
|
|
+ , quis nostrud exercitation ullamco
|
|
|
+ <mark class="marker-pink">laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
|
|
|
+ esse cillum dolore eu
|
|
|
+ </mark>
|
|
|
+ fugiat nulla pariatur.
|
|
|
+ <mark class="pen-red">Excepteur</mark>
|
|
|
+ sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
|
|
|
+ laborum.
|
|
|
+ </p>
|
|
|
+</div>
|