2f:T4bc,The following functions were heavily influnced by the following [notebook](https://observablehq.com/d/633493063ab48151) The following decorations are a way to quickly highlight text. There is something clean and beautiful in the way the documents are presented on Observable. If I could port a ${hl1('book',1.2)} to it I'd use it. That way I can expand the document past the defaults of Markdown. And yes, I could use HTML. However it can take more time to get up and running. Granted, what [Glitch](https://glitch.com/) or [Codepen](https://codepen.io/) bring to the table are great. But this tool is specifically built for visualization and is special. I'd love to get into create custom tags to help further this, however I have yet to really take too much time to figure out what needs to be done. # Features * Highlighting w/ resizing ${hl1('text',em)} * Underlining w/ resizing ${ul1('text',em)} * Future features: * Custom color palettes * to be continued... The ${hl3("following",em*1.2)} are a few ${hl1("small",em*1.4)}functions that are helper ${hl2("functions",em*1.6)} for text. And then ${hl4("there",em*1.7)} is this from which I am ${ul1('finding')} much ${hl5("peace",em*2)}.30:[] 2d:{"title":"Text Decorations 0.1","cells":[{"id":159,"value":"# Text Decorations 0.1\n## Basic highlighting helper functions in Observable","pinned":false,"hidden":false,"mode":"md"},{"id":120,"value":"viewof em = Inputs.range([0, 3], { label: \"EM Size\", step: 0.01, value: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":186,"value":"***","pinned":false,"hidden":false,"mode":"md"},{"id":130,"value":"## How to use..","pinned":false,"hidden":false,"mode":"md"},{"id":181,"value":"### Import \nSimple add the following import statement at the bottom which will import the functions necessary\n```\nimport {hl1, hl2, hl3, hl4, hl5, ul1, ul2, ul3, uc} from \"0ff856d672d3588b\"\n```\nAnd after that you just need to highlight your tags like so...","pinned":false,"hidden":false,"mode":"md"},{"id":132,"value":"It's pretty ${hl1('simple')}.","pinned":true,"hidden":false,"mode":"md"},{"id":151,"value":"Just make sure you use the variable interpolation in order to bring simple style to a page. ","pinned":false,"hidden":false,"mode":"md"},{"id":118,"value":"***","pinned":false,"hidden":false,"mode":"md"},{"id":87,"value":"## Highlight Text\nUsing the following highlight function","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"hl1 = (textContent, em) => {\n let bg = \"#5b5efd\";\n let cem = em == null ? 1 : em;\n return html`\n ${textContent}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"The fox ${hl1('quickly',em)} jumped over the fence. ","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"hl2 = (textContent, em) => {\n let bg = \"#37d0fd\";\n let cem = em == null ? 1 : em;\n return html`\n ${textContent}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"The fox quickly ${hl2('jumped',em)} over the fence.","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"hl3 = (textContent, em) => {\n let bg = \"#ffe699\";\n let cem = em == null ? 1 : em;\n return html`\n ${textContent}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"The fox quickly jumped ${hl3('over',em)} the fence. ","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"hl4 = (textContent, em) => {\n let bg = \"#90ffca\";\n let cem = em == null ? 1 : em;\n return html`\n ${textContent}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"The fox quickly ${hl4('jumped',em)} over the fence.","pinned":false,"hidden":false,"mode":"md"},{"id":42,"value":"hl5 = (textContent, em) => {\n let bg = \"#ff7878\";\n let cem = em == null ? 1 : em;\n return html`\n ${textContent}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"The fox ${hl5('quickly',em)} jumped over the fence.","pinned":false,"hidden":false,"mode":"md"},{"id":89,"value":"## Underline Text","pinned":false,"hidden":false,"mode":"md"},{"id":92,"value":"ul1 = (textContent, em) => {\n let bg = \"#5b5efd\";\n let cem = em == null ? 1 : em;\n return html`\n ${textContent}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"The fox ${ul1('quickly',em)} jumped over the fence.","pinned":false,"hidden":false,"mode":"md"},{"id":212,"value":"ul2 = (textContent, em) => {\n let bg = \"#5b5efd\";\n let cem = em == null ? 1 : em;\n return html`\n ${textContent}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"The fox ${ul2('quickly',em)} jumped over the fence.","pinned":false,"hidden":false,"mode":"md"},{"id":219,"value":"ul3 = (textContent, em) => {\n let bg = \"#5b5efd\";\n let cem = em == null ? 1 : em;\n return html`\n ${textContent}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"The fox ${ul3('quickly',em)} jumped over the fence.","pinned":false,"hidden":false,"mode":"md"},{"id":203,"value":"## Upper Case ","pinned":false,"hidden":false,"mode":"md"},{"id":195,"value":"The following word will be ${uc('displayed')}. ","pinned":false,"hidden":false,"mode":"md"},{"id":193,"value":"uc = (textContent, em) => {\n let bg = \"#5b5efd\";\n let cem = em == null ? 1 : em;\n return html`\n ${textContent}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"## Notes \n* To go uppercase `text-transform: uppercase`;","pinned":false,"hidden":false,"mode":"md"}],"files":"$W30","stdlib":"1","titling":"auto"}