Fix wrong line number in code search result (#29260) (#29623)

Backport #29260 by @yp05327

Fix #29136

Before:
The result is a table and all line numbers are all in one row.

![image](https://github.com/go-gitea/gitea/assets/18380374/7a18b354-e257-4f57-a5ca-f6d37378edf6)

![image](https://github.com/go-gitea/gitea/assets/18380374/98416e11-89b5-4b4f-920b-91bcf041a87f)

After:

![image](https://github.com/go-gitea/gitea/assets/18380374/f189e436-9046-4431-926a-cd0deb58e8f1)

![image](https://github.com/go-gitea/gitea/assets/18380374/07d213ed-2401-4b7f-b951-5df7dc776af4)

~~Updated:~~
~~added `active` class to the target line.~~

![image](https://github.com/go-gitea/gitea/assets/18380374/0b274e48-048a-4c66-ba95-df515212ec08)

Co-authored-by: yp05327 <576951401@qq.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

modules/indexer/code/search.go

@@ -16,14 +16,18 @@ import (
 
 // Result a search result to display
 type Result struct {
-	RepoID         int64
+	RepoID      int64
-	Filename       string
+	Filename    string
-	CommitID       string
+	CommitID    string
-	UpdatedUnix    timeutil.TimeStamp
+	UpdatedUnix timeutil.TimeStamp
-	Language       string
+	Language    string
-	Color          string
+	Color       string
-	LineNumbers    []int
+	Lines       []ResultLine
-	FormattedLines template.HTML
+}
+
+type ResultLine struct {
+	Num              int
+	FormattedContent template.HTML
 }
 
 type SearchResultLanguages = internal.SearchResultLanguages
@@ -70,7 +74,7 @@ func searchResult(result *internal.SearchResult, startIndex, endIndex int) (*Res
 	var formattedLinesBuffer bytes.Buffer
 
 	contentLines := strings.SplitAfter(result.Content[startIndex:endIndex], "\n")
-	lineNumbers := make([]int, len(contentLines))
+	lines := make([]ResultLine, 0, len(contentLines))
 	index := startIndex
 	for i, line := range contentLines {
 		var err error
@@ -93,21 +97,29 @@ func searchResult(result *internal.SearchResult, startIndex, endIndex int) (*Res
 			return nil, err
 		}
 
-		lineNumbers[i] = startLineNum + i
+		lines = append(lines, ResultLine{Num: startLineNum + i})
 		index += len(line)
 	}
 
-	highlighted, _ := highlight.Code(result.Filename, "", formattedLinesBuffer.String())
+	// we should highlight the whole code block first, otherwise it doesn't work well with multiple line highlighting
+	hl, _ := highlight.Code(result.Filename, "", formattedLinesBuffer.String())
+	highlightedLines := strings.Split(string(hl), "\n")
+
+	// The lines outputted by highlight.Code might not match the original lines, because "highlight" removes the last `\n`
+	lines = lines[:min(len(highlightedLines), len(lines))]
+	highlightedLines = highlightedLines[:len(lines)]
+	for i := 0; i < len(lines); i++ {
+		lines[i].FormattedContent = template.HTML(highlightedLines[i])
+	}
 
 	return &Result{
-		RepoID:         result.RepoID,
+		RepoID:      result.RepoID,
-		Filename:       result.Filename,
+		Filename:    result.Filename,
-		CommitID:       result.CommitID,
+		CommitID:    result.CommitID,
-		UpdatedUnix:    result.UpdatedUnix,
+		UpdatedUnix: result.UpdatedUnix,
-		Language:       result.Language,
+		Language:    result.Language,
-		Color:          result.Color,
+		Color:       result.Color,
-		LineNumbers:    lineNumbers,
+		Lines:       lines,
-		FormattedLines: highlighted,
 	}, nil
 }
 

templates/code/searchresults.tmpl

@@ -22,20 +22,7 @@
 				<a role="button" class="ui basic tiny button" rel="nofollow" href="{{$repo.Link}}/src/commit/{{$result.CommitID | PathEscape}}/{{.Filename | PathEscapeSegments}}">{{ctx.Locale.Tr "repo.diff.view_file"}}</a>
 			</h4>
 			<div class="ui attached table segment">
-				<div class="file-body file-code code-view">
+				{{template "shared/searchfile" dict "RepoLink" $repo.Link "SearchResult" .}}
-					<table>
-						<tbody>
-							<tr>
-								<td class="lines-num">
-									{{range .LineNumbers}}
-										<a href="{{$repo.Link}}/src/commit/{{$result.CommitID | PathEscape}}/{{$result.Filename | PathEscapeSegments}}#L{{.}}"><span>{{.}}</span></a>
-									{{end}}
-								</td>
-								<td class="lines-code chroma"><code class="code-inner">{{.FormattedLines}}</code></td>
-							</tr>
-						</tbody>
-					</table>
-				</div>
 			</div>
 			{{template "shared/searchbottom" dict "root" $ "result" .}}
 		</div>

templates/repo/search.tmpl

@@ -44,20 +44,7 @@
 								<a role="button" class="ui basic tiny button" rel="nofollow" href="{{$.SourcePath}}/src/commit/{{PathEscape $result.CommitID}}/{{PathEscapeSegments .Filename}}">{{ctx.Locale.Tr "repo.diff.view_file"}}</a>
 							</h4>
 							<div class="ui attached table segment">
-								<div class="file-body file-code code-view">
+								{{template "shared/searchfile" dict "RepoLink" $.SourcePath "SearchResult" .}}
-									<table>
-										<tbody>
-											<tr>
-												<td class="lines-num">
-													{{range .LineNumbers}}
-														<a href="{{$.SourcePath}}/src/commit/{{PathEscape $result.CommitID}}/{{PathEscapeSegments $result.Filename}}#L{{.}}"><span>{{.}}</span></a>
-													{{end}}
-												</td>
-												<td class="lines-code chroma"><code class="code-inner">{{.FormattedLines}}</code></td>
-											</tr>
-										</tbody>
-									</table>
-								</div>
 							</div>
 							{{template "shared/searchbottom" dict "root" $ "result" .}}
 						</div>

templates/shared/searchfile.tmpl

@@ -0,0 +1,14 @@
+<div class="file-body file-code code-view">
+	<table>
+		<tbody>
+			{{range .SearchResult.Lines}}
+				<tr>
+					<td class="lines-num">
+						<a href="{{$.RepoLink}}/src/commit/{{PathEscape $.SearchResult.CommitID}}/{{PathEscapeSegments $.SearchResult.Filename}}#L{{.Num}}"><span>{{.Num}}</span></a>
+					</td>
+					<td class="lines-code chroma"><code class="code-inner">{{.FormattedContent}}</code></td>
+				</tr>
+			{{end}}
+		</tbody>
+	</table>
+</div>