"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[557],{3905:function(e,t,i){i.d(t,{Zo:function(){return u},kt:function(){return p}});var n=i(7294);function r(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function a(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,n)}return i}function l(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?a(Object(i),!0).forEach((function(t){r(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):a(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function s(e,t){if(null==e)return{};var i,n,r=function(e,t){if(null==e)return{};var i,n,r={},a=Object.keys(e);for(n=0;n<a.length;n++)i=a[n],t.indexOf(i)>=0||(r[i]=e[i]);return r}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)i=a[n],t.indexOf(i)>=0||Object.prototype.propertyIsEnumerable.call(e,i)&&(r[i]=e[i])}return r}var o=n.createContext({}),c=function(e){var t=n.useContext(o),i=t;return e&&(i="function"==typeof e?e(t):l(l({},t),e)),i},u=function(e){var t=c(e.components);return n.createElement(o.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var i=e.components,r=e.mdxType,a=e.originalType,o=e.parentName,u=s(e,["components","mdxType","originalType","parentName"]),d=c(i),p=r,h=d["".concat(o,".").concat(p)]||d[p]||m[p]||a;return i?n.createElement(h,l(l({ref:t},u),{},{components:i})):n.createElement(h,l({ref:t},u))}));function p(e,t){var i=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var a=i.length,l=new Array(a);l[0]=d;var s={};for(var o in t)hasOwnProperty.call(t,o)&&(s[o]=t[o]);s.originalType=e,s.mdxType="string"==typeof e?e:r,l[1]=s;for(var c=2;c<a;c++)l[c]=i[c];return n.createElement.apply(null,l)}return n.createElement.apply(null,i)}d.displayName="MDXCreateElement"},2695:function(e,t,i){i.d(t,{Z:function(){return s}});var n=i(7462),r=i(3366),a=i(7294),l=["isBad","isGood","children","disableFullscreen","limitWidth"];function s(e){var t=e.isBad,i=e.isGood,s=e.children,o=e.disableFullscreen,c=e.limitWidth,u=(0,r.Z)(e,l),m=(0,a.useState)(!1),d=m[0],p=m[1];return a.createElement("div",{className:"preview-box-wrapper",style:c?{width:c,display:"table",margin:"0 auto"}:{}},!o&&a.createElement("button",{"aria-label":d?"Minimize the example":"Fullscreen the example",className:"preview-box-fullscreen-toggle",onClick:function(e){var t=e.target.closest(".preview-box-wrapper");d?document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen():t.requestFullscreen?t.requestFullscreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen():t.msRequestFullscreen&&t.msRequestFullscreen(),p(!d)}},d?a.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 24 24"},a.createElement("path",{d:"M19.707 18.293a1 1 0 01-1.414 1.414L16 17.414V18a1 1 0 01-2 0v-3a1 1 0 011-1h3a1 1 0 010 2h-.586zM9 14H6a1 1 0 000 2h.586l-2.293 2.293a1 1 0 001.414 1.414L8 17.414V18a1 1 0 002 0v-3a1 1 0 00-1-1zm0-9a1 1 0 00-1 1v.586L5.707 4.293a1 1 0 00-1.414 1.414L6.586 8H6a1 1 0 000 2h3a1 1 0 001-1V6a1 1 0 00-1-1zm6 5h3a1 1 0 000-2h-.586l2.293-2.293a1 1 0 00-1.414-1.414L16 6.586V6a1 1 0 00-2 0v3a1 1 0 001 1z"})):a.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"26 26 48 48"},a.createElement("path",{d:"M54.347 57.882A8.96 8.96 0 0150 59a8.96 8.96 0 01-4.347-1.118L40.736 62.8c-.38.38-.257.701.29.701h.98A2.503 2.503 0 0144.5 66c0 1.39-1.122 2.5-2.507 2.5h-7.986a2.505 2.505 0 01-2.507-2.507v-7.986A2.502 2.502 0 0134 55.5a2.49 2.49 0 012.5 2.493v.98c0 .547.314.678.7.29l4.918-4.916A8.96 8.96 0 0141 50a8.96 8.96 0 011.118-4.347L37.2 40.736c-.38-.38-.701-.257-.701.29v.98A2.503 2.503 0 0134 44.5c-1.39 0-2.5-1.122-2.5-2.507v-7.986a2.505 2.505 0 012.507-2.507h7.986A2.502 2.502 0 0144.5 34a2.49 2.49 0 01-2.493 2.5h-.98c-.547 0-.678.314-.29.7l4.916 4.918A8.96 8.96 0 0150 41a8.96 8.96 0 014.347 1.118l4.917-4.917c.38-.38.257-.701-.29-.701h-.98A2.503 2.503 0 0155.5 34c0-1.39 1.122-2.5 2.507-2.5h7.986a2.505 2.505 0 012.507 2.507v7.986A2.502 2.502 0 0166 44.5a2.49 2.49 0 01-2.5-2.493v-.98c0-.547-.314-.678-.7-.29l-4.918 4.916A8.96 8.96 0 0159 50a8.96 8.96 0 01-1.118 4.347l4.917 4.917c.38.38.701.257.701-.29v-.98A2.503 2.503 0 0166 55.5c1.39 0 2.5 1.122 2.5 2.507v7.986a2.505 2.505 0 01-2.507 2.507h-7.986A2.502 2.502 0 0155.5 66a2.49 2.49 0 012.493-2.5h.98c.547 0 .678-.314.29-.7l-4.916-4.918zM50 54a4 4 0 100-8 4 4 0 000 8z"}))),t&&a.createElement("div",{className:"is-bad-example style-red"},a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"2 2 12 12"},a.createElement("path",{d:"M3.3 12.7c.2.2.4.3.7.3s.5-.1.7-.3L8 9.4l3.3 3.3c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L9.4 8l3.3-3.3c.4-.4.4-1 0-1.4s-1-.4-1.4 0L8 6.6 4.7 3.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4L6.6 8l-3.3 3.3c-.4.4-.4 1 0 1.4z"}))),i&&a.createElement("div",{className:"is-good-example style-green"},a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 18 18"},a.createElement("path",{d:"M5.056 15.04a1.5 1.5 0 002.217-.119l10.17-12.476A1.5 1.5 0 0015.118.55L6.007 11.758l-3.453-3.41a1.5 1.5 0 10-2.109 2.133l4.611 4.56"}))),a.createElement("iframe",(0,n.Z)({width:"100%",className:"docus-preview-box"+(d?" is-fullscreen":""),srcDoc:s},u)))}},3382:function(e,t,i){i.r(t),i.d(t,{frontMatter:function(){return o},contentTitle:function(){return c},metadata:function(){return u},toc:function(){return m},default:function(){return p}});var n=i(7462),r=i(3366),a=(i(7294),i(3905)),l=i(2695),s=["components"],o={title:"Highlight"},c=void 0,u={unversionedId:"content/highlight",id:"content/highlight",isDocsHomePage:!1,title:"Highlight",description:"Highlight text with HTML `` tag, but there are some features that should be explained.",source:"@site/docs/content/highlight.mdx",sourceDirName:"content",slug:"/content/highlight",permalink:"/docs/content/highlight",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/content/highlight.mdx",tags:[],version:"current",frontMatter:{title:"Highlight"},sidebar:"tutorialSidebar",previous:{title:"Figure and image",permalink:"/docs/content/figure"},next:{title:"Keyboard buttons",permalink:"/docs/content/keyboard-buttons"}},m=[{value:"Default",id:"default",children:[],level:3},{value:"Inline",id:"inline",children:[],level:3},{value:"Customization",id:"customization",children:[],level:3}],d={toc:m};function p(e){var t=e.components,i=(0,r.Z)(e,s);return(0,a.kt)("wrapper",(0,n.Z)({},d,i,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"Highlight text with HTML ",(0,a.kt)("inlineCode",{parentName:"p"},"<mark>")," tag, but there are some features that should be explained."),(0,a.kt)("h3",{id:"default"},"Default"),(0,a.kt)(l.Z,{height:"100px",children:'<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Highlight</title> </head> Lorem ipsum <mark>dolor sit amet</mark>, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.\n</html>',mdxType:"PreviewBox"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},"Lorem ipsum <mark>dolor sit amet</mark>, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.\n")),(0,a.kt)("h3",{id:"inline"},"Inline"),(0,a.kt)("p",null,"By adding ",(0,a.kt)("inlineCode",{parentName:"p"},".inline")," class to the ",(0,a.kt)("inlineCode",{parentName:"p"},"<mark>")," it will not break the line and highlight will have a different style, This is so cool for highlighting words in a sentence."),(0,a.kt)(l.Z,{height:"100px",children:'<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Highlight</title> </head> <mark class="inline">Lorem ipsum</mark> dolor sit amet, consectetuer <mark class="inline">adipiscing</mark> elit. Donec odio. Quisque volutpat mattis eros.\n</html>',mdxType:"PreviewBox"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<mark class="inline">Lorem ipsum</mark> dolor sit amet, consectetuer <mark class="inline">adipiscing</mark> elit. Donec\nodio. Quisque volutpat mattis eros. mattis eros.\n')),(0,a.kt)("h3",{id:"customization"},"Customization"),(0,a.kt)("p",null,"You can customize highlights text and background color with ",(0,a.kt)("a",{parentName:"p",href:"/docs/helpers/color-setters"},"color setter classes"),"."),(0,a.kt)(l.Z,{height:"260px",children:'<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Highlight</title> </head> <mark class="inline style-green">Lorem ipsum</mark> dolor sit amet, consectetuer <mark class="inline style-red">adipiscing</mark> elit. Donec odio. Quisque volutpat mattis eros. <br> Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.  <mark class="style-purple">Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat.</mark> Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.\n</html>',mdxType:"PreviewBox"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<mark class="inline style-green">Lorem ipsum</mark> dolor sit amet, consectetuer\n<mark class="inline style-red">adipiscing</mark> elit.\n\n<br />\n\nDonec odio. Quisque volutpat mattis eros. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit\namet orci.\n<mark class="style-purple">\n  Aenean dignissim pellentesque felis. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in,\n  pharetra a, ultricies in, diam. Sed arcu. Cras consequat.Donec nec justo eget felis facilisis fermentum. Aliquam\n  porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. Praesent dapibus, neque id cursus faucibus,\n  tortor neque egestas auguae, eu vulputate magna eros eu erat. Aliquam erat volutpat.\n</mark>\nNam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.\n')))}p.isMDXComponent=!0}}]);