# Markdown emoji previewing

**URL:** <https://discuss.codemirror.net/t/markdown-emoji-previewing/5186>\
**Category:** v6\
**Created:** [October 25, 2022, 12:38pm UTC](https://discuss.codemirror.net/t/markdown-emoji-previewing/5186 "2022-10-25T12:38:47Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![aetinx](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/aetinx/32/2521_2.png) [@aetinx](https://discuss.codemirror.net/u/aetinx)\
**Post date:** [October 25, 2022, 12:38pm UTC](https://discuss.codemirror.net/t/markdown-emoji-previewing/5186/1 "2022-10-25T12:38:47Z")

</div>

Is it possible to turn emojis (`:1234:`) into images?

For example, turning `:lober:` into an image of a plush lobster (

 ![image](https://discuss.codemirror.net/uploads/default/original/2X/f/fe871b1ad568489bcd6abd92524a59e6858deddf.jpeg)) inside the editor.

---

<div class="post-metadata">

**Author:** ![push-f](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/p/ce73a5/32.png) [@push-f](https://discuss.codemirror.net/u/push-f)\
**Post date:** [October 25, 2022, 2:13pm UTC](https://discuss.codemirror.net/t/markdown-emoji-previewing/5186/2 "2022-10-25T14:13:34Z")

</div>

Yes that can be implemented via “replacing decorations”, see [Example: Decorations](https://codemirror.net/examples/decoration/).

---

<div class="post-metadata">

**Author:** ![aetinx](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/aetinx/32/2521_2.png) [@aetinx](https://discuss.codemirror.net/u/aetinx)\
**Post date:** [October 25, 2022, 3:00pm UTC](https://discuss.codemirror.net/t/markdown-emoji-previewing/5186/3 "2022-10-25T15:00:49Z")

</div>

Is there a vanilla JS way to do this?

---

<div class="post-metadata">

**Author:** ![push-f](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/p/ce73a5/32.png) [@push-f](https://discuss.codemirror.net/u/push-f)\
**Post date:** [October 25, 2022, 3:09pm UTC](https://discuss.codemirror.net/t/markdown-emoji-previewing/5186/4 "2022-10-25T15:09:07Z")

</div>

Yes of course. If you look at the Atomic Ranges example there isn’t even really any TypeScript magic there … you can just leave out the type annotations and it works fine in JavaScript. (But you should really do yourself a favor and use TypeScript … it’s much less error-prone than writing JavaScript without any help).

---

<div class="post-metadata">

**Author:** ![aetinx](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/aetinx/32/2521_2.png) [@aetinx](https://discuss.codemirror.net/u/aetinx)\
**Post date:** [October 25, 2022, 3:24pm UTC](https://discuss.codemirror.net/t/markdown-emoji-previewing/5186/5 "2022-10-25T15:24:19Z")

</div>

Where should I find the `view` thing? I can’t find anything on [codemirror - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers](https://cdnjs.com/libraries/codemirror) and I don’t know how or if I can use `import`.

---

<div class="post-metadata">

**Author:** ![push-f](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/p/ce73a5/32.png) [@push-f](https://discuss.codemirror.net/u/push-f)\
**Post date:** [October 25, 2022, 4:08pm UTC](https://discuss.codemirror.net/t/markdown-emoji-previewing/5186/6 "2022-10-25T16:08:54Z")

</div>

Yeah cdnjs does not serve the other @codemirror/\* packages as far as I know … you could use a CDN like Skypack, e.g. the following should work:

```auto
<script type=module>
import {EditorView, Decoration} from "https://cdn.skypack.dev/@codemirror/view";
</script>

```

Note however that this really isn’t a good idea. Users of your website will have to download many script files … it’s better to bundle them up using either a Node.js-based bundler like Rollup, [as explained in the documentation](https://codemirror.net/examples/bundle/) or by using TypeScript and [Deno](https://deno.land/).

---

<div class="post-metadata">

**Author:** ![push-f](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/p/ce73a5/32.png) [@push-f](https://discuss.codemirror.net/u/push-f)\
**Post date:** [October 25, 2022, 7:31pm UTC](https://discuss.codemirror.net/t/markdown-emoji-previewing/5186/9 "2022-10-25T19:31:05Z")

</div>

Yes the `DecorationSet` is only a type alias. You don’t need it at all.

---

<div class="post-metadata">

**Author:** ![benatkin](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/benatkin/32/1019_2.png) [@benatkin](https://discuss.codemirror.net/u/benatkin)\
**Post date:** [October 31, 2022, 12:13am UTC](https://discuss.codemirror.net/t/markdown-emoji-previewing/5186/10 "2022-10-31T00:13:11Z")

</div>

It’s easier to use Node. All the examples use it. [CodeMirror Examples](https://codemirror.net/examples/)

I suggest using vite, but any node dev tool is fine.

---

<div class="post-metadata">

**Author:** ![Potherca](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/potherca/32/3316_2.png) [@Potherca](https://discuss.codemirror.net/u/Potherca)\
**Post date:** [May 9, 2023, 5:03pm UTC](https://discuss.codemirror.net/t/markdown-emoji-previewing/5186/11 "2023-05-09T17:03:23Z")

</div>

“easier” 😂