diff --git a/SearchBox.vue b/SearchBox.vue
deleted file mode 100644
index ce8b4a9..0000000
--- a/SearchBox.vue
+++ /dev/null
@@ -1,364 +0,0 @@
-<template>
-  <div class="search-box">
-    <input
-      @input="query = $event.target.value"
-      aria-label="Search"
-      :value="query"
-      :class="{ 'focused': focused }"
-      :placeholder="placeholder"
-      autocomplete="off"
-      spellcheck="false"
-      @focus="focused = true"
-      @blur="focused = false"
-      @keyup.enter="go(focusIndex)"
-      @keyup.up="onUp"
-      @keyup.down="onDown"
-      ref="input"
-    >
-    <ul
-      class="suggestions"
-      v-if="showSuggestions"
-      :class="{ 'align-right': alignRight }"
-      @mouseleave="unfocus"
-    >
-      <li
-        class="suggestion"
-        v-for="(s, i) in suggestions"
-        :key="i"
-        :class="{ focused: i === focusIndex }"
-        @mousedown="go(i)"
-        @mouseenter="focus(i)"
-      >
-        <a
-          :href="s.path"
-          @click.prevent
-        >
-          <span
-            class="page-title"
-            v-html="s.title || s.path"
-          ></span>
-        </a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-import Flexsearch from "flexsearch";
-
-/* global SEARCH_MAX_SUGGESTIONS, SEARCH_PATHS, SEARCH_HOTKEYS */
-export default {
-  data () {
-    return {
-      query: '',
-      focused: false,
-      focusIndex: 0,
-      placeholder: undefined,
-      index: null
-    }
-  },
-
-  mounted () {
-    this.placeholder = this.$site.themeConfig.searchPlaceholder || ''
-    document.addEventListener('keydown', this.onHotkey)
-
-    this.setupFlexSearch()
-  },
-
-  beforeDestroy () {
-    document.removeEventListener('keydown', this.onHotkey)
-  },
-
-  computed: {
-    showSuggestions () {
-      return (
-        this.focused
-        && this.suggestions
-        && this.suggestions.length
-      )
-    },
-
-    suggestions () {
-      const query = this.query.trim().toLowerCase()
-      if (!query) {
-        return
-      }
-
-      const result = this.index.search(query, 10).map(page => {
-        return {
-          ...page,
-          title: this.getQuerySnippet(page)
-        }
-      })
-
-      return result
-    },
-
-    // make suggestions align right when there are not enough items
-    alignRight () {
-      const navCount = (this.$site.themeConfig.nav || []).length
-      const repo = this.$site.repo ? 1 : 0
-      return navCount + repo <= 2
-    }
-  },
-
-  methods: {
-    getPageLocalePath (page) {
-      for (const localePath in this.$site.locales || {}) {
-        if (localePath !== '/' && page.path.indexOf(localePath) === 0) {
-          return localePath
-        }
-      }
-      return '/'
-    },
-
-    isSearchable (page) {
-      let searchPaths = SEARCH_PATHS
-
-      // all paths searchables
-      if (searchPaths === null) { return true }
-
-      searchPaths = Array.isArray(searchPaths) ? searchPaths : new Array(searchPaths)
-
-      return searchPaths.filter(path => {
-        return page.path.match(path)
-      }).length > 0
-    },
-
-    onHotkey (event) {
-      if (event.srcElement === document.body && SEARCH_HOTKEYS.includes(event.key)) {
-        this.$refs.input.focus()
-        event.preventDefault()
-      }
-    },
-
-    onUp () {
-      if (this.showSuggestions) {
-        if (this.focusIndex > 0) {
-          this.focusIndex--
-        } else {
-          this.focusIndex = this.suggestions.length - 1
-        }
-      }
-    },
-
-    onDown () {
-      if (this.showSuggestions) {
-        if (this.focusIndex < this.suggestions.length - 1) {
-          this.focusIndex++
-        } else {
-          this.focusIndex = 0
-        }
-      }
-    },
-
-    go (i) {
-      if (!this.showSuggestions) {
-        return
-      }
-      const path = this.suggestions[i].path
-
-      if (this.$route.path !== path) {
-        this.$router.push(this.suggestions[i].path)
-      };
-
-      this.query = ''
-      this.focusIndex = 0
-    },
-
-    focus (i) {
-      this.focusIndex = i
-    },
-
-    unfocus () {
-      this.focusIndex = -1
-    },
-
-    setupFlexSearch () {
-      let defaultOptions = {
-        encode: "extra",
-        tokenize: "full",
-        threshold: 1,
-        resolution: 3
-      }
-      let options = this.$site.themeConfig.flexSearchOptions || defaultOptions
-
-      options = {
-        ...options,
-        doc: {
-          id: "key",
-          field: ["title", "content"]
-        }
-      }
-      this.index = new Flexsearch(options);
-      const { pages } = this.$site;
-      this.index.add(pages);
-    },
-
-    getQuerySnippet (page) {
-      const queryPosition = page.content.toLowerCase().indexOf(this.query)
-      const startIndex = queryPosition - 20 < 0 ? 0 : queryPosition - 20
-      const endIndex = queryPosition + 30
-      const querySnippet = page.content.slice(startIndex, endIndex)
-
-      const queryWords = this.query.toLowerCase().split(' ').filter((v, i, a) => !!v && a.indexOf(v) === i); 
-
-      let highlightedSnippet = ""
-      for (let i = 0; i < querySnippet.length;) {
-        const matchingWord = queryWords.find(word => querySnippet.toLowerCase().startsWith(word, i))
-        if (matchingWord === undefined) {
-          highlightedSnippet += querySnippet[i]
-          i += 1
-        } else {
-          const highlightedWord = querySnippet.slice(i, i + matchingWord.length)
-          highlightedSnippet += `<strong class="text--primary">${highlightedWord}</strong>`
-          i += matchingWord.length
-        }
-      }
-
-      if (highlightedSnippet) {
-        return `<strong class="text--primary">${page.title}</strong> > .. ${highlightedSnippet} ..`
-      } else {
-        return page.title
-      }
-    },
-
-  }
-}
-</script>
-
-<style lang="stylus">
-.search-box {
-  display: inline-block;
-  position: relative;
-  margin-right: 1rem;
-
-  input {
-    cursor: text;
-    width: 10rem;
-    height: 2rem;
-    color: lighten($textColor, 25%);
-    display: inline-block;
-    border: 1px solid darken($borderColor, 10%);
-    border-radius: 2rem;
-    font-size: 0.9rem;
-    line-height: 2rem;
-    padding: 0 0.5rem 0 2rem;
-    outline: none;
-    transition: all 0.2s ease;
-    background: #fff url('search.svg') 0.6rem 0.5rem no-repeat;
-    background-size: 1rem;
-
-    &:focus {
-      cursor: auto;
-      border-color: $accentColor;
-    }
-  }
-
-  .suggestions {
-    background: #fff;
-    width: 20rem;
-    position: absolute;
-    top: 1.5rem;
-    border: 1px solid darken($borderColor, 10%);
-    border-radius: 6px;
-    padding: 0.4rem;
-    list-style-type: none;
-
-    &.align-right {
-      right: 0;
-    }
-  }
-
-  .suggestion {
-    line-height: 1.4;
-    padding: 0.4rem 0.6rem;
-    border-radius: 4px;
-    cursor: pointer;
-
-    a {
-      white-space: normal;
-      color: lighten($textColor, 35%);
-
-      .page-title {
-        font-weight: 600;
-      }
-
-      .header {
-        font-size: 0.9em;
-        margin-left: 0.25em;
-      }
-    }
-
-    &.focused {
-      background-color: #f3f4f5;
-
-      a {
-        color: $accentColor;
-      }
-    }
-  }
-}
-
-@media (max-width: $MQNarrow) {
-  .search-box {
-    input {
-      cursor: pointer;
-      width: 0;
-      border-color: transparent;
-      position: relative;
-
-      &:focus {
-        cursor: text;
-        left: 0;
-        width: 10rem;
-      }
-    }
-  }
-}
-
-// Match IE11
-@media all and (-ms-high-contrast: none) {
-  .search-box input {
-    height: 2rem;
-  }
-}
-
-@media (max-width: $MQNarrow) and (min-width: $MQMobile) {
-  .search-box {
-    .suggestions {
-      left: 0;
-    }
-  }
-}
-
-@media (max-width: $MQMobile) {
-  .search-box {
-    margin-right: 0;
-
-    input {
-      left: 1rem;
-    }
-
-    .suggestions {
-      right: 0;
-    }
-  }
-}
-
-@media (max-width: $MQMobileNarrow) {
-  .search-box {
-    .suggestions {
-      width: calc(100vw - 4rem);
-    }
-
-    input:focus {
-      width: 8rem;
-    }
-  }
-}
-
-.text--primary {
-  color: $accentColor;
-}
-</style>
diff --git a/example/docs/.vuepress/config.js b/example/docs/.vuepress/config.js
index 9bcbb53..b7c01bd 100755
--- a/example/docs/.vuepress/config.js
+++ b/example/docs/.vuepress/config.js
@@ -1,10 +1,10 @@
-const { description } = require('../../package')
+const { description } = require("../../package");
 
 module.exports = {
   /**
    * Ref：https://v1.vuepress.vuejs.org/config/#title
    */
-  title: 'Vuepress Docs Boilerplate',
+  title: "Vuepress Docs Boilerplate",
   /**
    * Ref：https://v1.vuepress.vuejs.org/config/#description
    */
@@ -16,9 +16,12 @@ module.exports = {
    * ref：https://v1.vuepress.vuejs.org/config/#head
    */
   head: [
-    ['meta', { name: 'theme-color', content: '#3eaf7c' }],
-    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
-    ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }]
+    ["meta", { name: "theme-color", content: "#3eaf7c" }],
+    ["meta", { name: "apple-mobile-web-app-capable", content: "yes" }],
+    [
+      "meta",
+      { name: "apple-mobile-web-app-status-bar-style", content: "black" },
+    ],
   ],
 
   /**
@@ -27,45 +30,40 @@ module.exports = {
    * ref：https://v1.vuepress.vuejs.org/theme/default-theme-config.html
    */
   themeConfig: {
-    repo: '',
+    repo: "",
     editLinks: false,
-    docsDir: '',
-    editLinkText: '',
+    docsDir: "",
+    editLinkText: "",
     lastUpdated: false,
     nav: [
       {
-        text: 'Guide',
-        link: '/guide/',
+        text: "Guide",
+        link: "/guide/",
       },
       {
-        text: 'Config',
-        link: '/config/'
+        text: "Config",
+        link: "/config/",
       },
       {
-        text: 'VuePress',
-        link: 'https://v1.vuepress.vuejs.org'
-      }
+        text: "VuePress",
+        link: "https://v1.vuepress.vuejs.org",
+      },
     ],
     sidebar: {
-      '/guide/': [
+      "/guide/": [
         {
-          title: 'Guide',
+          title: "Guide",
           collapsable: false,
-          children: [
-            '',
-            'using-vue',
-          ]
-        }
+          children: ["", "using-vue"],
+        },
       ],
-    }
+    },
   },
 
   /**
    * Apply plugins，ref：https://v1.vuepress.vuejs.org/zh/plugin/
    */
   plugins: [
-    '@vuepress/plugin-back-to-top',
-    '@vuepress/plugin-medium-zoom',
-    require.resolve('../../../')
-  ]
-}
+    [require.resolve("../../../"), {}],
+  ],
+};
diff --git a/example/docs/config/README.md b/example/docs/config/README.md
index 63a04b9..f05e8e2 100755
--- a/example/docs/config/README.md
+++ b/example/docs/config/README.md
@@ -2,8 +2,6 @@
 sidebar: auto
 ---
 
-# Config
-
 ## foo
 
 - Type: `string`
diff --git a/index.js b/index.js
index cc6597a..db1bec6 100644
--- a/index.js
+++ b/index.js
@@ -1,22 +1,31 @@
-const { path } = require('@vuepress/shared-utils')
-const he = require('he');
+const { path } = require("@vuepress/shared-utils");
+const { getPageText } = require("./src/utils");
+
+let defaultSearchOptions = {
+  encode: "icase",
+  tokenize: "forward",
+  resolution: 9,
+  doc: {
+    id: "key",
+    field: ["title", "content", "headers"],
+  },
+};
+
+const DEFAULT_SEARCH_RESULT_LENGTH = 60;
 
 module.exports = (options) => ({
-    extendPageData ($page) {
-        if (!$page._strippedContent) {
-            return
-        }
-        // _strippedContent does not contain the YAML frontmatter
-        const { html } = $page._context.markdown.render($page._strippedContent)
-        const text = he.decode( // decode HTML entities like &quot;
-			html
-				.replace(/(<[^>]+>)+/g, " ") // remove HTML tags
-				.replace(/^\s*#\s/gm, "") // remove header anchors inserted by vuepress
-		)
-        $page.content = text
-    },
-    alias: {
-        '@SearchBox':
-            path.resolve(__dirname, 'SearchBox.vue')
-    },
-})
+  extendPageData($page) {
+    $page.content = getPageText($page);
+  },
+  alias: {
+    "@SearchBox": path.resolve(__dirname, "src", "SearchBox.vue"),
+  },
+  define: {
+    SEARCH_OPTIONS: options.search_options || defaultSearchOptions,
+    SEARCH_MAX_SUGGESTIONS: options.maxSuggestions || 10,
+    SEARCH_PATHS: options.searchPaths || null,
+    SEARCH_HOTKEYS: options.searchHotkeys || "s",
+    SEARCH_RESULT_LENGTH:
+      Number(options.searchResultLength) || DEFAULT_SEARCH_RESULT_LENGTH,
+  },
+});
diff --git a/src/SearchBox.vue b/src/SearchBox.vue
new file mode 100644
index 0000000..8d9e552
--- /dev/null
+++ b/src/SearchBox.vue
@@ -0,0 +1,360 @@
+<template>
+  <div class="search-box">
+    <input
+      @input="query = $event.target.value"
+      aria-label="Search"
+      :value="query"
+      :class="{ focused: focused }"
+      :placeholder="placeholder"
+      autocomplete="off"
+      spellcheck="false"
+      @focus="focused = true"
+      @blur="focused = false"
+      @keyup.enter="go(focusIndex)"
+      @keyup.up="onUp"
+      @keyup.down="onDown"
+      ref="input"
+    />
+    <ul
+      class="suggestions"
+      v-if="showSuggestions"
+      :class="{ 'align-right': alignRight }"
+      @mouseleave="unfocus"
+    >
+      <li
+        class="suggestion"
+        v-for="(s, i) in suggestions"
+        :key="i"
+        :class="{ focused: i === focusIndex }"
+        @mousedown="go(i)"
+        @mouseenter="focus(i)"
+      >
+        <a :href="s.regularPath" @click.prevent>
+          <span
+            v-html="s.title || s.regularPath"
+            class="suggestion__title"
+          ></span>
+          <span v-html="s.text" class="suggestion__result"></span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import Flexsearch from "flexsearch";
+import { highlightText } from "./utils";
+
+/* global 
+SEARCH_MAX_SUGGESTIONS
+SEARCH_PATHS
+SEARCH_HOTKEYS
+SEARCH_OPTIONS
+SEARCH_RESULT_LENGTH
+*/
+export default {
+  data() {
+    return {
+      query: "",
+      focused: false,
+      focusIndex: 0,
+      placeholder: undefined,
+      index: null,
+    };
+  },
+
+  mounted() {
+    this.placeholder = this.$site.themeConfig.searchPlaceholder || "";
+    document.addEventListener("keydown", this.onHotkey);
+
+    this.setupFlexSearch();
+  },
+
+  beforeDestroy() {
+    document.removeEventListener("keydown", this.onHotkey);
+  },
+
+  computed: {
+    showSuggestions() {
+      return this.focused && this.suggestions && this.suggestions.length;
+    },
+
+    suggestions() {
+      const query = this.query.trim().toLowerCase();
+      if (!query) {
+        return;
+      }
+
+      const result = this.index
+        .search(query, SEARCH_MAX_SUGGESTIONS)
+        .map((page) => {
+          return {
+            ...page,
+            title: this.getSuggestionTitle(page),
+            text: this.getSuggestionText(page),
+          };
+        });
+
+      return result;
+    },
+
+    // make suggestions align right when there are not enough items
+    alignRight() {
+      const navCount = (this.$site.themeConfig.nav || []).length;
+      const repo = this.$site.repo ? 1 : 0;
+      return navCount + repo <= 2;
+    },
+  },
+
+  methods: {
+    getPageLocalePath(page) {
+      for (const localePath in this.$site.locales || {}) {
+        if (localePath !== "/" && page.path.indexOf(localePath) === 0) {
+          return localePath;
+        }
+      }
+      return "/";
+    },
+
+    isSearchable(page) {
+      let searchPaths = SEARCH_PATHS;
+
+      // all paths searchables
+      if (searchPaths === null) {
+        return true;
+      }
+
+      searchPaths = Array.isArray(searchPaths)
+        ? searchPaths
+        : new Array(searchPaths);
+
+      return (
+        searchPaths.filter((path) => {
+          return page.path.match(path);
+        }).length > 0
+      );
+    },
+
+    onHotkey(event) {
+      if (
+        event.srcElement === document.body &&
+        SEARCH_HOTKEYS.includes(event.key)
+      ) {
+        this.$refs.input.focus();
+        event.preventDefault();
+      }
+    },
+
+    onUp() {
+      if (this.showSuggestions) {
+        if (this.focusIndex > 0) {
+          this.focusIndex--;
+        } else {
+          this.focusIndex = this.suggestions.length - 1;
+        }
+      }
+    },
+
+    onDown() {
+      if (this.showSuggestions) {
+        if (this.focusIndex < this.suggestions.length - 1) {
+          this.focusIndex++;
+        } else {
+          this.focusIndex = 0;
+        }
+      }
+    },
+
+    go(i) {
+      if (!this.showSuggestions) {
+        return;
+      }
+      const path = this.suggestions[i].path;
+
+      if (this.$route.path !== path) {
+        this.$router.push(this.suggestions[i].path);
+      }
+
+      this.query = "";
+      this.focusIndex = 0;
+    },
+
+    focus(i) {
+      this.focusIndex = i;
+    },
+
+    unfocus() {
+      this.focusIndex = -1;
+    },
+
+    setupFlexSearch() {
+      this.index = new Flexsearch(SEARCH_OPTIONS);
+      const { pages } = this.$site;
+      this.index.add(pages);
+    },
+
+    getSuggestionTitle(page) {
+      const title = page.title ? page.title : page.regularPath;
+      return highlightText(title, this.query);
+    },
+
+    getSuggestionText(page) {
+      const content = page.content;
+      const queryIndex = content
+        .toLowerCase()
+        .indexOf(this.query.toLowerCase());
+      const queryFirstWord = this.query.split(" ")[0];
+      let startIndex =
+        queryIndex === -1
+          ? content.toLowerCase().indexOf(queryFirstWord.toLowerCase())
+          : queryIndex;
+      let prefix = "";
+      if (startIndex > 15) {
+        startIndex -= 15;
+        prefix = ".. ";
+      }
+      const text = page.content.substr(startIndex, SEARCH_RESULT_LENGTH);
+      return prefix + highlightText(text, this.query);
+    },
+  },
+};
+</script>
+
+<style lang="stylus">
+.search-box {
+  display: inline-block;
+  position: relative;
+  margin-right: 1rem;
+
+  input {
+    cursor: text;
+    width: 10rem;
+    height: 2rem;
+    color: lighten($textColor, 25%);
+    display: inline-block;
+    border: 1px solid darken($borderColor, 10%);
+    border-radius: .4rem;
+    font-size: 0.9rem;
+    line-height: 2rem;
+    padding: 0 0.5rem 0 2rem;
+    outline: none;
+    transition: all 0.2s ease;
+    background: #fff url('./assets/search.svg') 0.6rem 0.5rem no-repeat;
+    background-size: 1rem;
+
+    &:focus {
+      cursor: auto;
+      border-color: $accentColor;
+      width: 15rem;
+    }
+  }
+
+  .suggestions {
+    background: white;
+    width: 20rem;
+    position: absolute;
+    top: 1.5rem;
+    border: 1px solid darken($borderColor, 10%);
+    padding: .4rem;
+    border-radius: .6rem;
+    list-style-type: none;
+
+    &.align-right {
+      right: 0;
+    }
+  }
+
+  .suggestion {
+    line-height: 1.4;
+    padding: 0.6rem 1rem;
+    cursor: pointer;
+
+    a {
+      white-space: normal;
+      color: lighten($textColor, 35%);
+
+      em {
+        color: $accentColor;
+        font-weight bold;
+        font-style normal
+      }
+      .suggestion__title {
+        font-weight: 600;
+        color: $textColor;
+        display block;
+        padding-bottom .4rem;
+      }
+
+      .suggestion__text {
+        font-size: 0.9em;
+      }
+    }
+
+    &.focused {
+      background-color: lighten($accentColor, 93%);
+    }
+  }
+}
+
+@media (max-width: $MQNarrow) {
+  .search-box {
+    input {
+      cursor: pointer;
+      width: 0;
+      border-color: transparent;
+      position: relative;
+
+      &:focus {
+        cursor: text;
+        left: 0;
+        width: 10rem;
+      }
+    }
+  }
+}
+
+// Match IE11
+@media all and (-ms-high-contrast: none) {
+  .search-box input {
+    height: 2rem;
+  }
+}
+
+@media (max-width: $MQNarrow) and (min-width: $MQMobile) {
+  .search-box {
+    .suggestions {
+      left: 0;
+    }
+  }
+}
+
+@media (max-width: $MQMobile) {
+  .search-box {
+    margin-right: 0;
+
+    input {
+      left: 1rem;
+    }
+
+    .suggestions {
+      right: 0;
+    }
+  }
+}
+
+@media (max-width: $MQMobileNarrow) {
+  .search-box {
+    .suggestions {
+      width: calc(100vw - 4rem);
+    }
+
+    input:focus {
+      width: 8rem;
+    }
+  }
+}
+
+.highlighted {
+  color: $accentColor;
+}
+</style>
diff --git a/search.svg b/src/assets/search.svg
similarity index 100%
rename from search.svg
rename to src/assets/search.svg
diff --git a/src/utils.js b/src/utils.js
new file mode 100644
index 0000000..cb166bc
--- /dev/null
+++ b/src/utils.js
@@ -0,0 +1,40 @@
+const he = require("he");
+
+/**
+ * @param  page
+ * @returns {string}
+ */
+module.exports.getPageText = (page) => {
+  if (!page._strippedContent) {
+    return "";
+  }
+  // _strippedContent does not contain the YAML frontmatter
+  const { html } = page._context.markdown.render(page._strippedContent);
+
+  const text = he.decode(
+    // decode HTML entities like &quot;
+    html
+      .replace(/(<[^>]+>)+/g, " ") // remove HTML tags
+      .replace(/^\s*#\s/gm, "") // remove header anchors inserted by vuepress
+  );
+  return text;
+};
+
+/**
+ * @param  {string} fullText
+ * @param  {string} highlightTarget
+ * @returns {string}
+ */
+module.exports.highlightText = (fullText, highlightTarget) => {
+  let result = fullText;
+  highlightWords = highlightTarget.split(" ").filter((word) => word.length > 0);
+  if (highlightWords.length > 0) {
+    for (const word of highlightWords) {
+      result = result.replace(new RegExp(word, "ig"), "<em>$&</em>");
+    }
+  } else {
+    result = fullText.replace(new RegExp(highlightTarget, "ig"), "<em>$&</em>");
+  }
+
+  return result;
+};