highlight.html 985 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <style>
  2. .marker {
  3. background-color: #fdfd77;
  4. }
  5. .marker-green {
  6. background-color: #63f963;
  7. }
  8. .marker-pink {
  9. background-color: #fc7999;
  10. }
  11. .marker-blue {
  12. background-color: #72cdfd;
  13. }
  14. .pen-red {
  15. background-color: transparent;
  16. color: #e91313;
  17. }
  18. .pen-green {
  19. background-color: transparent;
  20. color: #118800;
  21. }
  22. </style>
  23. <div id="editor">
  24. <p>Highlight feature example.</p>
  25. <p>
  26. Here are some markers:
  27. </p>
  28. <ul>
  29. <li>the <mark class="marker">yellow</mark> one,</li>
  30. <li>the <mark class="marker-pink">pink</mark> one,</li>
  31. <li>the <mark class="marker-green">green</mark> one,</li>
  32. <li>the <mark class="marker-blue">blue</mark> one</li>
  33. </ul>
  34. <p>
  35. Here are some pens:
  36. <mark class="pen-red">red pen</mark> and <mark class="pen-green">green one</mark>.
  37. </p>
  38. <figure class="image">
  39. <img src="sample.jpg" alt="CKEditor logo" />
  40. <figcaption>Some image with caption and <mark class="marker">highlighted text</mark>.</figcaption>
  41. </figure>
  42. </div>