「商品の内容を変更」章で+-差分表記していたのを変更前、変更後表記に変更。（#176）

docs/rendering.md

@@ -116,17 +116,22 @@ mustache とは口髭を指す英語で、二重中括弧 `{{ }}` が口髭の
 ## 商品の内容を変更
 商品の内容を変更し、表示に反映されることを確認してみましょう。商品名 `name`、概要文 `description`、価格 `price` をそれぞれ適当に変更します。
 
-```diff
+変更前（script）
+
+<<< @/../examples/rendering/src/App.vue#script
+
+変更後（script）
+
+```vue
 <script setup>
 import { ref } from 'vue'
 const item = ref({
--  name: "アボカドディップバケット",
--  description: "刻んだ野菜をアボカドと混ぜてディップに。こんがり焼いたバゲットとお召し上がりください。",
--  price: 480,
-+  name: "アボカドソースバケット",
-+  description: "刻んだ野菜をアボカドと混ぜ、優しい味のソースに。こんがり焼いたバゲットとお召し上がりください。",
-+  price: 320,
-   image: "/images/item1.jpg"
+    id: 1,
+    name: 'アボカドソースバケット',
+    description:
+      '刻んだ野菜をアボカドと混ぜ、優しい味のソースに。こんがり焼いたバゲットとお召し上がりください。',
+    price: 320,
+    image: '/images/item1.jpg'
 })
 </script>
 ```