3e:null 3f:["$","title",null,{"children":"Text Decorations 0.1 | Chris Ried | Observable"}] 45: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)}.46:[] 43:{"id":"0ff856d672d3588b","slug":null,"title":"Text Decorations 0.1","thumbnail":"4ed56fbc490288055b2660eee3578a8a6f26049c47f3863becf86717531521c1","access_level":"public","create_time":"$D2023-07-15T23:50:39.818Z","update_time":"$D2023-07-20T12:09:19.707Z","view_time":null,"first_public_time":"$D2023-07-17T05:59:53.394Z","has_unpublished_edits":null,"fork":false,"stars":15,"starred":false,"owner":{"type":"team","id":"b021585f8dd574ac","login":"cdr6934","name":"Chris Ried","avatar_url":"https://avatars-next.observableusercontent.com/79ffdb5b29f55f658282d26aa24a67562ae37cdf1cefc1287a1fb37076740f6a","tier":"starter_2024","bio":"Creative Technologist, Data Scientist, Generative Artist (generatecoll) ","following":false},"version":231,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2b08471af969fd79","login":"cdr6934","name":"Chris Ried","avatar_url":"https://avatars-next.observableusercontent.com/79ffdb5b29f55f658282d26aa24a67562ae37cdf1cefc1287a1fb37076740f6a","tier":null,"bio":"Creative Technologist, Data Scientist, Generative Artist (generatecoll) ","following":false}],"members":[{"type":"individual","id":"2b08471af969fd79","login":"cdr6934","name":"Chris Ried","avatar_url":"https://avatars-next.observableusercontent.com/79ffdb5b29f55f658282d26aa24a67562ae37cdf1cefc1287a1fb37076740f6a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":120,"value":"viewof em = Inputs.range([0, 3], { label: \"EM Size\", step: 0.01, value: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"***","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":130,"value":"## How to use..","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":132,"value":"It's pretty ${hl1('simple')}.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"***","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"## Highlight Text\nUsing the following highlight function","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"The fox ${hl1('quickly',em)} jumped over the fence. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"The fox quickly ${hl2('jumped',em)} over the fence.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"The fox quickly jumped ${hl3('over',em)} the fence. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"The fox quickly ${hl4('jumped',em)} over the fence.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"The fox ${hl5('quickly',em)} jumped over the fence.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"## Underline Text","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"The fox ${ul1('quickly',em)} jumped over the fence.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"The fox ${ul2('quickly',em)} jumped over the fence.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"The fox ${ul3('quickly',em)} jumped over the fence.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":203,"value":"## Upper Case ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":195,"value":"The following word will be ${uc('displayed')}. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"## Notes \n* To go uppercase `text-transform: uppercase`;","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"