diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1c99fc151..d07876905 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,9 @@
   [#381](https://github.com/nextcloud/cookbook/pull/381) @thembeat
 - Changing category name for all recipes in a category
   [#555](https://github.com/nextcloud/cookbook/pull/555/) @seyfeb
-  
+- Functionality to reference other recipes by id in description, tools, ingredients, and instructions
+  [#562](https://github.com/nextcloud/cookbook/pull/562/) @seyfeb
+
 ### Changed
 - Using computed property in recipe view
   [#522](https://github.com/nextcloud/cookbook/pull/522/) @seyfeb
diff --git a/src/components/AppNavi.vue b/src/components/AppNavi.vue
index a46be4227..91c6cd849 100644
--- a/src/components/AppNavi.vue
+++ b/src/components/AppNavi.vue
@@ -29,7 +29,7 @@
             <AppNavigationCaption :title="t('cookbook', 'Categories')" >
                 <template slot="actions">
                     <ActionButton icon="icon-rename" @click="toggleCategoryRenaming">
-                        Enable editing
+                        {{ t('cookbook', 'Toggle editing') }}
                     </ActionButton>
                 </template>
             </AppNavigationCaption>
diff --git a/src/components/EditInputField.vue b/src/components/EditInputField.vue
index 3d5d61f61..45f5491ac 100644
--- a/src/components/EditInputField.vue
+++ b/src/components/EditInputField.vue
@@ -1,21 +1,41 @@
 <template>
-    <fieldset>
+    <fieldset @keyup="keyPressed">
         <label>
             {{ fieldLabel }}
         </label>
-        <markdown-editor class='editor' v-if="fieldType==='markdown'" :type="textarea" v-model="content" @input="handleInput" toolbar='' />
-        <input v-else-if="fieldType!=='textarea'" :type="fieldType" v-model="content" @input="handleInput" />
-        <textarea v-else-if="fieldType==='textarea'" v-model="content" @input="handleInput" />
+        <markdown-editor ref="inputField" class='editor' v-if="fieldType==='markdown'" v-model="content" @input="handleInput" toolbar='' />
+        <input ref="inputField" v-else-if="fieldType!=='textarea'" :type="fieldType" v-model="content" @input="handleInput" />
+        <textarea ref="inputField" v-if="fieldType==='textarea'" v-model="content" @input="handleInput" />
     </fieldset>
 </template>
 
 <script>
+
 export default {
     name: "EditInputField",
-    props: ['value','fieldType','fieldLabel'],
+    props: {
+        fieldLabel: {
+            type: String,
+            default: ''
+        },
+        fieldType: {
+            type: String,
+            default: ''
+        },
+        referencePopupEnabled: {
+            type: Boolean,
+            default: false
+        },
+        // Value (passed in v-model)
+        value: {
+            default: '',
+            required: true
+        }
+    },
     data () {
         return {
-            content: ''
+            content: '',
+            lastCursorPosition: -1
         }
     },
     watch: {
@@ -27,6 +47,90 @@ export default {
         handleInput (e) {
             this.$emit('input', this.content)
         },
+        /**
+         * Catches # key down presses and opens recipe-references dialog
+         */
+        keyPressed(e) {
+            // Using keyup for trigger will prevent repeat triggering if key is held down
+            if (this.referencePopupEnabled && e.keyCode === 51) {
+                e.preventDefault()
+                // Check if the letter before the hash
+                if (this.fieldType === 'markdown') {
+                    // for reference: https://codemirror.net/doc/manual.html#api
+                    let cursorPos = JSON.parse(JSON.stringify(this.$refs.inputField.editor.getCursor('start')))
+                    let prevChar = this.$refs.inputField.editor.getRange(
+                        {line: cursorPos.line, ch: cursorPos.ch-2}, 
+                        {line: cursorPos.line, ch: cursorPos.ch-1})
+                    if (cursorPos.ch === 1 || prevChar === ' ' || prevChar === '\n' || prevChar === '\r') {
+                        // beginning of line
+                        this.$parent.$emit('showRecipeReferencesPopup', {context: this})
+                        this.lastCursorPosition = cursorPos
+                    }
+                } else {
+                    this.$refs['inputField'].selectionStart
+                    let content = this.$refs['inputField'].value
+                    let prevChar = cursorPos > 1 ? content.charAt(cursorPos-2) : ''
+                    if (cursorPos === 1 || prevChar === ' ' || prevChar === '\n' || prevChar === '\r') {
+                        // Show dialog to select recipe
+                        this.$parent.$emit('showRecipeReferencesPopup', {context: this})
+                        this.lastCursorPosition = cursorPos
+                    }
+                }
+
+            }
+        },
+        pasteCanceled() {
+            // set cursor to position after pasted string
+            this.$nextTick(function() {
+                let field = this.$refs['inputField']
+                if (this.fieldType === 'markdown') {
+                    field.editor.setCursor(this.lastCursorPosition)
+                    field.editor.focus()                    
+                } else {
+                    field.focus()
+                    field.setSelectionRange (this.lastCursorPosition, this.lastCursorPosition)
+                }
+            })
+        },
+        /**
+         * Paste string at the last saved cursor position
+         */
+        pasteString(str) {
+            let field = this.$refs['inputField']
+
+            if (this.fieldType == 'markdown') {
+                // insert at last cursor position
+                field.editor.replaceRange(str, 
+                    {line: this.lastCursorPosition.line, ch: this.lastCursorPosition.ch} 
+                    )
+                this.$emit('input', this.content)
+                this.$nextTick(() => {
+                    this.$nextTick(() => {
+                        field.editor.focus()
+                        field.editor.setCursor({line: this.lastCursorPosition.line, ch: this.lastCursorPosition.ch + str.length})
+                    })
+                })
+
+            } else {
+                // insert str
+                this.content = this.content.slice(0, this.lastCursorPosition)
+                    + str + this.content.slice(this.lastCursorPosition)
+                this.$emit('input', this.content)
+    
+                // set cursor to position after pasted string. Waiting two ticks is necessary for
+                // the data to be updated in the field
+                this.$nextTick(() => {
+                    this.$nextTick(() => {
+                        field.focus()
+                        let newCursorPos = this.lastCursorPosition + str.length
+                        field.setSelectionRange( newCursorPos, newCursorPos)
+                    })
+                })
+            }
+
+        }
+    },
+    mounted() {
     }
 }
 </script>
@@ -72,11 +176,12 @@ fieldset > .editor {
 fieldset > .editor {
     min-height: 10em;
     resize: vertical;
-    radius: 2;
+    border-radius: 2;
 }
 
     @media(max-width:1199px) { fieldset > input, fieldset > textarea, fieldset > .editor {
         width: 100%;
     }}
 
+
 </style>
diff --git a/src/components/EditInputGroup.vue b/src/components/EditInputGroup.vue
index 9394973c6..9efb0bf8a 100644
--- a/src/components/EditInputGroup.vue
+++ b/src/components/EditInputGroup.vue
@@ -5,7 +5,7 @@
             <li :class="fieldType" v-for="(entry,idx) in buffer" :key="fieldName+idx">
                 <div v-if="showStepNumber" class="step-number">{{ parseInt(idx) + 1 }}</div>
                 <input v-if="fieldType==='text'" type="text" ref="list-field" v-model="buffer[idx]" @keyup="keyPressed" v-on:input="handleInput" @paste="handlePaste" />
-                <textarea v-else-if="fieldType==='textarea'" ref="list-field" v-model="buffer[idx]" v-on:input="handleInput" @paste="handlePaste"></textarea>
+                <textarea v-else-if="fieldType==='textarea'" ref="list-field" v-model="buffer[idx]" @keyup="keyPressed" v-on:input="handleInput" @paste="handlePaste"></textarea>
                 <div class="controls">
                     <button class="icon-arrow-up" @click="moveEntryUp(idx)"></button>
                     <button class="icon-arrow-down" @click="moveEntryDown(idx)"></button>
@@ -18,6 +18,7 @@
 </template>
 
 <script>
+
 export default {
     name: "EditInputGroup",  
     props: {
@@ -26,7 +27,10 @@ export default {
           default: []
         },
         fieldType: String,
-        fieldName: String,
+        fieldName: {
+            type: String,
+            default: ''
+        },
         showStepNumber: {
             type: Boolean,
             default: false
@@ -37,13 +41,20 @@ export default {
             type: Boolean,
             default: false
         },
+        referencePopupEnabled: {
+            type: Boolean,
+            default: false
+        }
     },
     data () {
         return {
             // helper variables
             buffer: this.value.slice(),
             contentPasted: false,
-            singleLinePasted: false
+            singleLinePasted: false,
+            lastFocusedFieldIndex: null,
+            lastCursorPosition: -1,
+            ignoreNextKeyUp: false
         }
     },
     watch: {
@@ -156,17 +167,42 @@ export default {
          * Catches enter and key down presses and either adds a new row or focuses the one below
          */
         keyPressed(e) {
+            // If, e.g., enter has been pressed in the multiselect popup to select an option,
+            // ignore the following keyup event
+            if(this.ignoreNextKeyUp) {
+                this.ignoreNextKeyUp = false
+                return
+            }
             // Using keyup for trigger will prevent repeat triggering if key is held down
-            if (e.keyCode === 13 || e.keyCode === 10) {
+            if (e.keyCode === 13 ||
+                e.keyCode === 10 ||
+                (this.referencePopupEnabled && e.keyCode === 51)) {
                 e.preventDefault()
                 let $li = e.currentTarget.closest('li')
                 let $ul = $li.closest('ul')
                 let $pressed_li_index = Array.prototype.indexOf.call($ul.childNodes, $li)
 
-                if ($pressed_li_index >= this.$refs['list-field'].length - 1) {
-                    this.addNewEntry ()
-                } else {
-                    $ul.children[$pressed_li_index+1].getElementsByTagName('input')[0].focus()
+                if (e.keyCode === 13 || e.keyCode === 10) {
+                    if ($pressed_li_index >= this.$refs['list-field'].length - 1) {
+                        this.addNewEntry ()
+                    } else {
+                        $ul.children[$pressed_li_index+1].getElementsByTagName('input')[0].focus()
+                    }
+                }
+                else if (this.referencePopupEnabled && e.keyCode === 51) {
+                    e.preventDefault()
+                    let elm = this.$refs['list-field'][$pressed_li_index]
+                    // Check if the letter before the hash
+                    let cursorPos = elm.selectionStart
+                    let content = elm.value
+                    let prevChar = cursorPos > 1 ? content.charAt(cursorPos-2) : ''
+
+                    if (cursorPos === 1 || prevChar === ' ' || prevChar === '\n' || prevChar === '\r') {
+                        // Show dialog to select recipe
+                        this.$parent.$emit('showRecipeReferencesPopup', {context: this})
+                        this.lastFocusedFieldIndex = $pressed_li_index
+                        this.lastCursorPosition = cursorPos
+                    }
                 }
             }
         },
@@ -192,6 +228,39 @@ export default {
             this.buffer.splice(index - 1, 0, entry)
             this.$emit('input', this.buffer)
         },
+        pasteCanceled() {
+            let field = this.$refs['list-field'][this.lastFocusedFieldIndex]
+            // set cursor back to previous position
+            this.$nextTick(function() {
+                field.focus()
+                field.setSelectionRange (this.lastCursorPosition, this.lastCursorPosition)
+            })
+        },
+        /**
+         * Paste string at the last saved cursor position
+         */
+        pasteString(str, ignoreKeyup=true) {
+            let field = this.$refs['list-field'][this.lastFocusedFieldIndex]
+
+            // insert str
+            let content = field.value
+            let updatedContent = content.slice(0, this.lastCursorPosition)
+                + str
+                + content.slice(this.lastCursorPosition)
+            this.buffer[this.lastFocusedFieldIndex] = updatedContent
+            this.$emit('input', this.buffer)
+
+            // set cursor to position after pasted string. Waiting two ticks is necessary for
+            // the data to be updated in the field
+            this.$nextTick(function() {
+                this.$nextTick(function() {
+                    this.ignoreNextKeyUp = ignoreKeyup
+                    field.focus()
+                    let newCursorPos = this.lastCursorPosition + str.length
+                    field.setSelectionRange (newCursorPos, newCursorPos)
+                })
+            })
+        }
     },
 }
 </script>
diff --git a/src/components/EditMultiselectPopup.vue b/src/components/EditMultiselectPopup.vue
new file mode 100644
index 000000000..52554990b
--- /dev/null
+++ b/src/components/EditMultiselectPopup.vue
@@ -0,0 +1,114 @@
+<template>
+    <div class="multiselect-popup-container">
+        <Multiselect
+            ref="ms"
+            class="multiselect-popup-container__multiselect"
+            v-bind="$attrs"
+            v-on="$listeners"
+            open-direction="bottom"
+            :multiple="false"
+            @select="optionSelected"
+            @close="closePopup"
+            @keyup="keyUp"
+            />
+        <div class="multiselect-popup-container__close-button">
+            <button type="button" class="icon-close" :title="t('cookbook', 'Close')" @click="closePopup">{{ t('cookbook', 'Close') }}</button>
+        </div>
+    </div>
+</template>
+
+<script>
+import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+export default {
+    name: "EditMultiselectPopup",
+    components: {
+        Multiselect
+    },
+    props: {
+        focused: false
+    },
+    watch: {
+        focused () {
+            if (this.focused == true) {
+                this.$refs['ms'].$el.focus()
+            }
+        }
+    },
+    methods: {
+        closePopup: function(opt) {
+            this.$parent.$emit("ms-popup-selection-canceled")
+        },
+        optionSelected: function(opt) {
+            this.$parent.$emit("ms-popup-selected", opt)
+        },
+        keyUp: function(e) {
+            if (e.keyCode === 13 ) {
+                console.log('13')
+            }
+            if (e.keyCode === 10 ) {
+                console.log('10')
+            }
+
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+.multiselect-popup-container {
+    display: flex;
+    position: absolute;
+    z-index: 1100;
+    left: 0px;
+    top: 50px;
+    width: 100%;
+    height: calc(100% - 50px - 44px);
+    padding: .5em;
+    background-color: var(--color-main-background);
+}
+
+    @media(min-width:768px) { .multiselect-popup-container {
+        width: 500px;
+        height: 300px;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%,-50%);
+        border-radius: 5px;
+    }}
+
+
+    .multiselect-popup-container__multiselect {
+        width: 100%;
+    }
+
+    .multiselect-popup-container__close-button {
+        height: 44px;
+        width: 100%;
+        position: fixed;
+        bottom: 0px;
+        left: 0px;
+        background: var(--color-main-background);
+    }
+        @media(min-width:768px) { .multiselect-popup-container__close-button {
+            display: none;
+        }}
+
+
+        .multiselect-popup-container__close-button > button {
+            height: 44px;
+            width: calc(100vw - 10px);
+            margin: 5px;
+            position: fixed;
+            bottom: 0px;
+            background: var(--color-main-background);
+        }
+</style>
+
+<style>
+@media(max-width:767px) {
+    .multiselect-popup-container .multiselect div.multiselect__content-wrapper {
+        max-height: calc(100vh - 145px) !important;
+    }}
+
+</style>
diff --git a/src/components/RecipeEdit.vue b/src/components/RecipeEdit.vue
index bd9a99b16..b1566885e 100644
--- a/src/components/RecipeEdit.vue
+++ b/src/components/RecipeEdit.vue
@@ -2,7 +2,7 @@
     <div class="wrapper">
         <div class="overlay" :class="{hidden: !overlayVisible}" />
         <EditInputField :fieldType="'text'" :fieldLabel="t('cookbook', 'Name')" v-model="recipe['name']" />
-        <EditInputField :fieldType="'markdown'" :fieldLabel="t('cookbook', 'Description')" v-model="recipe['description']" />
+        <EditInputField :fieldType="'markdown'" :fieldLabel="t('cookbook', 'Description')" v-model="recipe['description']" :referencePopupEnabled="true" />
         <EditInputField :fieldType="'url'" :fieldLabel="t('cookbook', 'URL')" v-model="recipe['url']" />
         <EditImageField :fieldLabel="t('cookbook', 'Image')" v-model="recipe['image']" />
         <EditTimeField :fieldLabel="t('cookbook', 'Preparation time')" v-model="prepTime" />
@@ -12,9 +12,10 @@
         <EditMultiselect :fieldLabel="t('cookbook', 'Keywords')" :placeholder="t('cookbook', 'Choose keywords')" v-model="selectedKeywords" :options="allKeywords" :taggable="true" :multiple="true" :tagWidth="60" :loading="isFetchingKeywords" @tag="addKeyword" />
         <EditInputField :fieldType="'number'" :fieldLabel="t('cookbook', 'Servings')" v-model="recipe['recipeYield']" />
         <EditMultiselectInputGroup :fieldLabel="t('cookbook', 'Nutrition Information')" v-model="recipe['nutrition']" :options="availableNutritionFields" />
-        <EditInputGroup :fieldName="'tool'" :fieldType="'text'" :fieldLabel="t('cookbook', 'Tools')"  v-model="recipe['tool']" v-bind:createFieldsOnNewlines="true" />
-        <EditInputGroup :fieldName="'recipeIngredient'" :fieldType="'text'" :fieldLabel="t('cookbook', 'Ingredients')" v-model="recipe['recipeIngredient']" v-bind:createFieldsOnNewlines="true" />
-        <EditInputGroup :fieldName="'recipeInstructions'" :fieldType="'textarea'" :fieldLabel="t('cookbook', 'Instructions')"  v-model="recipe['recipeInstructions']" v-bind:createFieldsOnNewlines="true" v-bind:showStepNumber="true" />
+        <EditInputGroup :fieldName="'tool'" :fieldType="'text'" :fieldLabel="t('cookbook', 'Tools')"  v-model="recipe['tool']" v-bind:createFieldsOnNewlines="true" :referencePopupEnabled="true" />
+        <EditInputGroup :fieldName="'recipeIngredient'" :fieldType="'text'" :fieldLabel="t('cookbook', 'Ingredients')" v-model="recipe['recipeIngredient']" v-bind:createFieldsOnNewlines="true" :referencePopupEnabled="true" />
+        <EditInputGroup :fieldName="'recipeInstructions'" :fieldType="'textarea'" :fieldLabel="t('cookbook', 'Instructions')"  v-model="recipe['recipeInstructions']" v-bind:createFieldsOnNewlines="true" v-bind:showStepNumber="true" :referencePopupEnabled="true" />
+        <edit-multiselect-popup ref="referencesPopup" class="referencesPopup" :class="{visible: referencesPopupFocused}" :options="allrecipeOptions" track-by="recipe_id" label="title" :loading="loadingRecipeReferences" :focused="referencesPopupFocused" />
     </div>
 </template>
 
@@ -26,6 +27,7 @@ import EditInputField from './EditInputField'
 import EditInputGroup from './EditInputGroup'
 import EditMultiselect from './EditMultiselect'
 import EditMultiselectInputGroup from './EditMultiselectInputGroup'
+import EditMultiselectPopup from './EditMultiselectPopup'
 import EditTimeField from './EditTimeField'
 
 export default {
@@ -37,6 +39,7 @@ export default {
         EditMultiselect,
         EditTimeField,
         EditMultiselectInputGroup,
+        EditMultiselectPopup
     },
     props: ['id'],
     data () {
@@ -78,6 +81,7 @@ export default {
             isFetchingKeywords: true,
             allKeywords: [],
             selectedKeywords: [],
+            allRecipes: [],
             availableNutritionFields:
                 [{ key: 'calories', label: t('cookbook', 'Calories'), placeholder: t('cookbook', 'E.g.: 450 kcal (amount & unit)') },
                 { key: 'carbohydrateContent', label: t('cookbook', 'Carbohydrate content'), placeholder: t('cookbook', 'E.g.: 2 g (amount & unit)') },
@@ -90,10 +94,18 @@ export default {
                 { key: 'sodiumContent',label: t('cookbook', 'Sodium content'), placeholder: t('cookbook', 'E.g.: 2 g (amount & unit)') },
                 { key: 'sugarContent', label: t('cookbook', 'Sugar content'), placeholder: t('cookbook', 'E.g.: 2 g (amount & unit)') },
                 { key: 'transFatContent', label: t('cookbook', 'Trans-fat content'), placeholder: t('cookbook', 'E.g.: 2 g (amount & unit)') },
-                { key: 'unsaturatedFatContent', label: t('cookbook', 'Unsaturated-fat content'), placeholder: t('cookbook', 'E.g.: 2 g (amount & unit)') }]
+                { key: 'unsaturatedFatContent', label: t('cookbook', 'Unsaturated-fat content'), placeholder: t('cookbook', 'E.g.: 2 g (amount & unit)') }],
+            referencesPopupFocused: false,
+            popupContext: undefined,
+            loadingRecipeReferences: true
         }
     },
     computed: {
+        allrecipeOptions() {
+            return this.allRecipes.map(r => {
+                    return {recipe_id: r.recipe_id, title: r.recipe_id + ": " + r.name}
+                })
+        },
         categoryUpdating() {
             return this.$store.state.categoryUpdating
         },
@@ -368,6 +380,8 @@ export default {
         }
     },
     mounted () {
+        let $this = this
+
         // Store the initial recipe configuration for possible later use
         if (this.recipeInit === null) {
             this.recipeInit = this.recipe
@@ -397,7 +411,39 @@ export default {
                 this.recipe.recipeCategory = val[0]
             }
         })
+        // Register recipe-reference selection hook for showing popup when requested
+        // from a child element
+        this.$off('showRecipeReferencesPopup')
+        this.$on('showRecipeReferencesPopup', (val) => {
+            this.referencesPopupFocused = true
+            this.popupContext = val
+        })
+        // Register hook when recipe reference has been selected in popup
+        this.$off('ms-popup-selected')
+        this.$on('ms-popup-selected', (opt) => {
+            this.referencesPopupFocused = false
+            this.popupContext.context.pasteString('r/' + opt.recipe_id + ' ')
+        })
+        // Register hook when recipe reference has been selected in popup
+        this.$off('ms-popup-selection-canceled')
+        this.$on('ms-popup-selection-canceled', (opt) => {
+            this.referencesPopupFocused = false
+            this.popupContext.context.pasteCanceled()
+        })
         this.savingRecipe = false
+        
+        // Load data for all recipes to be used in recipe-reference popup suggestions
+        axios.get(this.$window.baseUrl + '/api/recipes')
+            .then(function (response) {
+                $this.allRecipes = response.data
+            })
+            .catch(function (e) {
+                console.log(e)
+            })
+            .then(() => {
+                // finally
+                $this.loadingRecipeReferences = false
+            })
     },
     beforeDestroy() {
       window.removeEventListener('beforeunload', this.beforeWindowUnload)
@@ -488,4 +534,13 @@ form fieldset ul label input[type="checkbox"] {
     cursor: pointer;
 } */
 
+.referencesPopup {
+    position: fixed;
+    display: none;
+}
+
+.referencesPopup.visible {
+    display: block;
+}
+
 </style>
diff --git a/src/components/RecipeIngredient.vue b/src/components/RecipeIngredient.vue
index bfdff6558..b600bd451 100644
--- a/src/components/RecipeIngredient.vue
+++ b/src/components/RecipeIngredient.vue
@@ -1,7 +1,7 @@
 <template>
     <li :class="{ 'header': isHeader(), 'unindented': !recipeIngredientsHaveSubgroups}" @click="toggleDone">
-    	<div class="checkmark" :class="{ 'done': isDone }">✔</div>
-    	<div class="ingredient">{{ displayIngredient }}</div>
+        <div class="checkmark" :class="{ 'done': isDone }">✔</div>
+        <div class="ingredient" v-html="displayIngredient"></div>
 	</li>
 </template>
 
diff --git a/src/components/RecipeInstruction.vue b/src/components/RecipeInstruction.vue
index 4a9130711..cf4ebcd0a 100644
--- a/src/components/RecipeInstruction.vue
+++ b/src/components/RecipeInstruction.vue
@@ -1,5 +1,5 @@
 <template>
-    <li :class="{ 'done': isDone }" @click="toggleDone">{{ instruction }}</li>
+    <li :class="{ 'done': isDone }" @click="toggleDone" v-html="instruction"></li>
 </template>
 
 <script>
diff --git a/src/components/RecipeTool.vue b/src/components/RecipeTool.vue
index e68ea24cc..1a4bfa8b5 100644
--- a/src/components/RecipeTool.vue
+++ b/src/components/RecipeTool.vue
@@ -1,12 +1,11 @@
 <template>
-    <li>{{ tool }}</li>
+    <li v-html="tool"></li>
 </template>
 
 <script>
 export default {
     name: 'RecipeTool',
     props: ['tool'],
-
 }
 </script>
 
diff --git a/src/components/RecipeView.vue b/src/components/RecipeView.vue
index c1600b9d5..9492121b9 100644
--- a/src/components/RecipeView.vue
+++ b/src/components/RecipeView.vue
@@ -25,7 +25,7 @@
                         </span>
                     </p>
 
-	                <VueShowdown :markdown="$store.state.recipe.description" class="markdown-description"/>
+	                <VueShowdown :markdown="recipe.description" class="markdown-description"/>
 	                <p v-if="$store.state.recipe.url">
 	                    <strong>{{ t('cookbook', 'Source') }}: </strong><a target="_blank" :href="$store.state.recipe.url" class='source-url'>{{ $store.state.recipe.url }}</a>
 	                </p>
@@ -117,6 +117,7 @@ export default {
     computed: {
         recipe: function() {
             let recipe = {
+                description: '',
                 ingredients: [],
                 instructions: [],
                 keywords: [],
@@ -129,12 +130,23 @@ export default {
                 nutrition: null
             }
 
+            if (this.$store.state.recipe.description) {
+                recipe.description = this.convertRecipeReferences(
+                    this.escapeHtml(this.$store.state.recipe.description))
+            }
+
             if (this.$store.state.recipe.recipeIngredient) {
                 recipe.ingredients = Object.values(this.$store.state.recipe.recipeIngredient)
+                    .map((i) => {
+                        return this.convertRecipeReferences(this.escapeHtml(i))
+                        })
             }
 
             if (this.$store.state.recipe.recipeInstructions) {
                 recipe.instructions = Object.values(this.$store.state.recipe.recipeInstructions)
+                    .map((i) => {
+                        return this.convertRecipeReferences(this.escapeHtml(i))
+                        })
             }
 
             if (this.$store.state.recipe.keywords) {
@@ -166,7 +178,9 @@ export default {
             }
 
             if (this.$store.state.recipe.tool) {
-                recipe.tools = this.$store.state.recipe.tool
+                recipe.tools = this.$store.state.recipe.tool.map((i) => {
+                        return this.convertRecipeReferences(this.escapeHtml(i))
+                        })
             }
 
             if (this.$store.state.recipe.dateCreated) {
@@ -178,6 +192,7 @@ export default {
                 let date = this.parseDateTime(this.$store.state.recipe.dateModified)
                 recipe.dateModified = (date != null ? date.format('L, LT').toString() : null)
             }
+
             if (this.$store.state.recipe.nutrition) {
                 if ( this.$store.state.recipe.nutrition instanceof Array) {
                     this.$store.state.recipe.nutrition = {}
@@ -223,6 +238,20 @@ export default {
         }
     },
     methods: {
+        escapeHtml: function(unsafeString) {
+            return unsafeString
+                .replace(/&/g, "&amp;")
+                .replace(/\~/g, "&#732;")
+                .replace(/</g, "&lt;")
+                .replace(/>/g, "&gt;")
+                .replace(/"/g, "&quot;")
+                .replace(/'/g, "&#039;");
+        },
+        convertRecipeReferences: function(text) {
+            let re = /(?<=^|\s|[,._+&?!-])#r\/(\d+)(?=$|\s|[.,_+&?!-])/g
+            let converted = text.replace(re, '<a class="recipe-reference-inline" href="'+this.$window.baseUrl+'/#/recipe/$1">#$1</a>')
+            return converted
+        },
         isNullOrEmpty: function(str) {
             return !str || typeof(str) === 'string' && 0 === str.trim().length;
         },
@@ -549,3 +578,13 @@ export default {
                 content: '✔';
             }
 </style>
+
+<style>
+.recipe-reference-inline {
+    color: var(--color-text-maxcontrast);
+    font-weight: 450;
+}
+.recipe-reference-inline:hover {
+    color: var(--color-main-text);
+}
+</style>