highlight.html 823 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. <style>
  2. .marker {
  3. background-color: #ffff66;
  4. }
  5. .marker-green {
  6. background-color: #66ff00;
  7. }
  8. .marker-pink {
  9. background-color: #ff6fff;
  10. }
  11. .pen-red {
  12. background-color: transparent;
  13. color: #ff2929;
  14. }
  15. .pen-blue {
  16. background-color: transparent;
  17. color: #0091ff;
  18. }
  19. </style>
  20. <div id="editor">
  21. <p>Highlight feature example.</p>
  22. <p>
  23. Here are some markers:
  24. <mark class="marker">yellow one</mark>, <mark class="marker-pink">pink one</mark> and <mark class="marker-green">green one</mark>.
  25. </p>
  26. <p>
  27. Here are some pens:
  28. <mark class="pen-red">red pen</mark> and <mark class="pen-blue">blue one</mark>.
  29. </p>
  30. <figure class="image">
  31. <img src="sample.jpg" alt="CKEditor logo" />
  32. <figcaption>Some image with caption and <mark class="marker">highlighted text</mark>.</figcaption>
  33. </figure>
  34. </div>